用html制作计算器（用HTML实现简易版计算器）
计算器功能：实现了加减乘除 、清零 、回退 、四则运算 、幂运算 、根式运算等等 。
运行结果如下：
引入的图片：back.png
HTML部分：用table表格添加计算器的按键 ，给每个按键设置一个相应的单击事件 ，点击一个按键后在div块里显示相应的内容 。
<div> <span id="result"></span> </div> <table border="1px" width="200px" height="300px"> <tbody align="center"> <tr> <td width="50px" onclick="leftBracket()">(</td> <td width="50px" onclick="rightBracket()">)</td> <td width="50px" onclick="ppow()">^</td> <td width="50px" onclick="psqrt()">√</td> </tr> <tr> <td onclick="c()">C</td> <td onclick="po(%)">%</td> <td width="50px" onclick="backspace()"><img src="img/back.png" width="25px"/></td> <td onclick="po(÷)">÷</td> </tr> <tr> <td onclick="pn(7)">7</td> <td onclick="pn(8)">8</td> <td onclick="pn(9)">9</td> <td onclick="po(×)">×</td> </tr> <tr> <td onclick="pn(4)">4</td> <td onclick="pn(5)">5</td> <td onclick="pn(6)">6</td> <td onclick="po(-)">-</td> </tr> <tr> <td onclick="pn(1)">1</td> <td onclick="pn(2)">2</td> <td onclick="pn(3)">3</td> <td onclick="po(+)">+</td> </tr> <tr> <td onclick="pn(00)">00</td> <td onclick="pn(0)">0</td> <td onclick="pn(.)">.</td> <td onclick="equals1()">=</td> </tr> </tbody> </table>CSS部分：通过绝对定位将所需显示的内容定位到div块右下角 。注意：绝对定位是根据有定位的第一个先祖标签进行定位的 ，但div块并不需要移动位置 ，因此这里给div添加相对定位；div块边框需要与table边框对齐 ，table的总宽度为200px ，div块的左右边框占2px ，所以width需要设置为198px 。
div {
width: 198px;
height: 50px;
border: 1px solid black;
border-bottom: none;
position: relative;
}
#result {
position: absolute;
right: 5px;
bottom: 5px;
}JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容 ，再调用eval方法将获取到的内容转换为js代码进行计算 。
"%"：计算器中的"%"一般为百分数 ，在进行运算时需要将"%" ，换为"*0.01"进行运算 。
回退：通过innerTHML属性得到字符串 ，将最后的字符去掉 ，再重新赋值给innerTHML属性 。
幂运算：用split方法将"^"前后分开 ，再查找进行此次幂运算的表达式 ，如数值 、带括号的表达式等等 。前半部分从字符串最后往前找 ，而后半部分则从前往后找 ，将查找匹配表达式的过程封装到leftOperation(r)方法和rightOperation(r)方法中 ，找到这些匹配的表达式后将此表达式返回给变量leftstr和rightstr ，将要参与幂运算的leftstr和rightstr跟Math.pow方法进行幂运算的拼接即拼接成字符串："Math.pow(leftstr, rightstr)"的格式赋值给num ，通过substring方法将"^"左右部分的字符串去掉进行幂运算的相关部分后再将num拼接到原"^"位置 。"^"操作符可能不止一个 ，用递归调用的方式在pow方法中再调用pow方法直到没有"^"为止 。
根式运算：对根号后面的数或表达式进行根式运算 ，用indexof方法判断有无根号 ，如果有根号通过split方法将根号前后的数或表达式分开 ，将根号后面的数或表达式通过rightOperation(r)方法单独取出赋值给rightstr ，将此rightstr跟Math.sqrt方法进行字符串拼接即拼接成："Math.sqrt(rightstr)"的格式后赋值给num ，最后通过substring方法将根号后面部分的字符串去掉进行根式运算的相关部分后再将num拼接到原根号位置 。同幂运算一样 ，根号也可能有多个所以要用到递归 。
在数学中括号 、根号等前面的乘号可以省略 ，所以要在输入左括号 、根号时做判断 ，判断前面的是数字还是运算符 ，如果是数字或"%" ，则在输入左括号 、根号前加一个乘号 ，如果是运算符则直接输入 。
//div块元素 var result; //是否进行了运算 var equal = false; window.onload = function(){ result = document.getElementById("result"); result.innerHTML = ""; } //如果进行了运算 ，下次输入数前进行清零 function isEqual(){ if (equal){ c(); equal = false; } } function pn(n){ isEqual(); result.innerHTML += n; } function po(o){ result.innerHTML += o; equal = false; } function leftBracket(){ isEqual(); var r = result.innerHTML; var c = r.charAt(r.length - 1); if ("0" <= c && c <= "9" || c == "%"){ po("×"); } result.innerHTML += "("; } function rightBracket(){ isEqual(); result.innerHTML += ")" } function ppow(){ isEqual(); result.innerHTML += "^" } function psqrt(){ isEqual(); var r = result.innerHTML; var c = r.charAt(r.length - 1); if ("0" <= c && c <= "9" || c == "%"){ po("×"); } result.innerHTML += "√"; } function c(){ result.innerHTML = ""; } function backspace(){ var r = result.innerHTML; result.innerHTML = r.substr(0,r.length - 1); isEqual(); } function equals1(){ equal = true; var r = result.innerHTML; //将特殊字符进行替换 r = r.replace(/×/g,"*"); r = r.replace(/÷/g,"/"); r = r.replace(/%/g,"*0.01"); try{ r = pow(r); r = sqrt(r); result.innerHTML=eval(r); }catch(e){ result.innerHTML="表达式不正确"; } } function pow(r){ var arr = r.split("^"); if (arr.length == 1){ return r; } var leftstr = leftOperation(arr[0]); var rightstr = rightOperation(arr[1]); var num = "Math.pow(" + leftstr + "," + rightstr + ")"; var leftr = arr[0].substring(0,arr[0].length - leftstr.length); var rightr = arr[1].substring(rightstr.length,arr[1].length); var r = leftr + num + rightr; return pow(r); } function sqrt(r){ if (r.indexOf("√") == -1){ return r; } var arr = r.split("√"); var rightstr = rightOperation(arr[1]); var num = "Math.sqrt(" + rightstr + ")"; var leftr = arr[0]; var rightr = arr[1].substring(rightstr.length,arr[1].length); var r =leftr + num + rightr; return sqrt(r); } function leftOperation(r){ var leftBracket = 0; var rightBracket = 0; var i; for (i = r.length - 1; i >=0; i--){ var c = r.charAt(i); if (c == ")"){ rightBracket++; } else if (leftBracket == rightBracket && c >="0" && c <= "9"){ break; } else if (c == "("){ leftBracket++; } } return r.substring(i); } function rightOperation(r){ var leftBracket = 0; var rightBracket = 0; var i; for (i = 0; i < r.length; i++){ var c = r.charAt(i); if (c == "("){ leftBracket++; } else if (leftBracket == rightBracket && c >="0" && c <= "9"){ break; } else if (c == ")"){ rightBracket++; } } return r.substring(0,i+1); }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！