[分享]一个JavaScript版的简易计算器，没有什么技术含量和实用价值，只供新手学习，高手帮忙再完善一下

n年前也写了个更没含量的计算器
用起来还算方便
这几年倒是经常拿它实用1.有多个输入屏，可以输入简单的变量
2.计算后会把原算式保留，算式输入错误，计算后发现只需改一下算式就行，而不用将整个算式重新输入
3.虽说没有返回键，但是在计算前,可以使用undo功能<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>算式</title>
</head>
<body>
<form name=frm onsubmit="return jisuan()">
变量: <input name="bianliang" size=40 value="">输入变量请在不同的变最之间用<font color=red>,</font>隔开，如<font color=red>a=1,b=2</font><br>
算式：<input name="suanshi" size=40 ><input type=submit value="开始计算" ><br>
结果：<input name="jieguo" size=40><br>
</form>
<script language=javascript>
function jisuan()
{
try
{
with(Math) //支持数学常用的数学函数
{
//JKhaveatest=frm.bianliang.value.match(/[\w,=\'\".]+/i); //除去变量定义里的非法字符
JKhaveatest=frm.bianliang.value;
if (JKhaveatest!="")
{
frm.bianliang.value=JKhaveatest;
eval("var "+JKhaveatest+";"); //定义变量
}
eval("frm.jieguo.value="+frm.suanshi.value); //计算值
}
    if ((frm.suanshi.value.match(/^$/i)+frm.suanshi.value.match(/$$/i))!="()")
frm.suanshi.value="("+frm.suanshi.value+")"; //用括号括起算式
    frm.suanshi.focus();
    }
catch(exception){alert("算式有误");frm.suanshi.focus();}
return false;
}
</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我的那个只是演示一下这三点功能，实用性不强。windows用户只要运行一下calc就OK了。呵呵1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法
我收集到的一个
-----------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>简易计算器</title>
<script language="JavaScript1.2">
var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./
function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)
result.innerText=results
}
}
function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
  <tr>
    <td width="100%" valign="top">
      <table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border-color:black" onClick="previouskey=event.srcElement.innerText">
    <tr>
      <td width="100%" bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
    </tr>
    <tr>
      <td width="100%" valign="middle" align="center">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
          <tr>
        <td width="80%" align="center">
          <table border="1" width="100%" cellspacing="0" cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white" onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onselectStart="return false" onClick="calculate()" height="82">
            <tr>
      <td width="25%" align="center" height="17">7</td>
      <td width="25%" align="center" height="17">8</td>
      <td width="25%" align="center" height="17">9</td>
      <td width="25%" align="center" height="17">/</td>
   </tr>
   <tr>
      <td width="25%" align="center" height="19">4</td>
      <td width="25%" align="center" height="19">5</td>
      <td width="25%" align="center" height="19">6</td>
      <td width="25%" align="center" height="19">*</td>
   </tr>
   <tr>
      <td width="25%" align="center" height="19">1</td>
      <td width="25%" align="center" height="19">2</td>
      <td width="25%" align="center" height="19">3</td>
      <td width="25%" align="center" height="19">-</td>
   </tr>
   <tr>
      <td width="25%" align="center" height="19">0</td>
      <td width="25%" align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
      <td width="25%" align="center" height="19">.</td>
      <td width="25%" align="center" height="19">+</td>
   </tr>
  </table>
</td>
<td width="20%">
  <div align="left">
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="result.innerText=0;results=''">C</td>
  </tr>
</table>
  </div>
  <div align="left">
    <table border="1" width="100%" cellspacing="0" cellpadding="0" height="81">
  <tr>
    <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
  </tr>
</table>
  </div>
</td>
  </tr>
</table>
  </td>
</tr>
  </table>
</td>
  </tr>
</table>
</body>
</html>