用HTML实现简易版计算器

计算器功能：实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。

运行结果如下：

引入的图片：back.png

HTML部分：用table表格添加计算器的按键，给每个按键设置一个相应的单击事件，点击一个按键后在div块里显示相应的内容。

1.  
   <div>
2.  
   <span id="result"></span>
3.  
   </div>
4.  
   <table border="1px" width="200px" height="300px">
5.  
   <tbody align="center">
6.  
   <tr>
7.  
   <td width="50px" onclick="leftBracket()">(</td>
8.  
   <td width="50px" onclick="rightBracket()">)</td>
9.  
   <td width="50px" onclick="ppow()">^</td>
10.  
    <td width="50px" onclick="psqrt()">√</td>
11.  
    </tr>
12.  
    <tr>
13.  
    <td onclick="c()">C</td>
14.  
    <td onclick="po('%')">%</td>
15.  
    <td width="50px" onclick="backspace()"><img src="img/back.png" width="25px"/></td>
16.  
    <td onclick="po('÷')">÷</td>
17.  
    </tr>
18.  
    <tr>
19.  
    <td onclick="pn(7)">7</td>
20.  
    <td onclick="pn(8)">8</td>
21.  
    <td onclick="pn(9)">9</td>
22.  
    <td onclick="po('×')">×</td>
23.  
    </tr>
24.  
    <tr>
25.  
    <td onclick="pn(4)">4</td>
26.  
    <td onclick="pn(5)">5</td>
27.  
    <td onclick="pn(6)">6</td>
28.  
    <td onclick="po('-')">-</td>
29.  
    </tr>
30.  
    <tr>
31.  
    <td onclick="pn(1)">1</td>
32.  
    <td onclick="pn(2)">2</td>
33.  
    <td onclick="pn(3)">3</td>
34.  
    <td onclick="po(' ')"> </td>
35.  
    </tr>
36.  
    <tr>
37.  
    <td onclick="pn('00')">00</td>
38.  
    <td onclick="pn(0)">0</td>
39.  
    <td onclick="pn('.')">.</td>
40.  
    <td onclick="equals1()">=</td>
41.  
    </tr>
42.  
    </tbody>
43.  
    </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拼接到原根号位置。同幂运算一样，根号也可能有多个所以要用到递归。

在数学中括号、根号等前面的乘号可以省略，所以要在输入左括号、根号时做判断，判断前面的是数字还是运算符，如果是数字或"%"，则在输入左括号、根号前加一个乘号，如果是运算符则直接输入。

1.  
   //div块元素
2.  
   var result;
3.  
   //是否进行了运算
4.  
   var equal = false;
5.  
   window.onload = function(){
6.  
   result = document.getElementById("result");
7.  
   result.innerHTML = "";
8.  
   }
9.  
   //如果进行了运算，下次输入数前进行清零
10.  
    function isEqual(){
11.  
    if (equal){
12.  
    c();
13.  
    equal = false;
14.  
    }
15.  
    }
16.  
     
17.  
    function pn(n){
18.  
    isEqual();
19.  
    result.innerHTML = n;
20.  
    }
21.  
     
22.  
    function po(o){
23.  
    result.innerHTML = o;
24.  
    equal = false;
25.  
    }
26.  
     
27.  
    function leftBracket(){
28.  
    isEqual();
29.  
    var r = result.innerHTML;
30.  
    var c = r.charAt(r.length - 1);
31.  
    if ("0" <= c && c <= "9" || c == "%"){
32.  
    po("×");
33.  
    }
34.  
    result.innerHTML = "(";
35.  
    }
36.  
     
37.  
    function rightBracket(){
38.  
    isEqual();
39.  
    result.innerHTML = ")"
40.  
    }
41.  
     
42.  
    function ppow(){
43.  
    isEqual();
44.  
    result.innerHTML = "^"
45.  
    }
46.  
     
47.  
    function psqrt(){
48.  
    isEqual();
49.  
    var r = result.innerHTML;
50.  
    var c = r.charAt(r.length - 1);
51.  
    if ("0" <= c && c <= "9" || c == "%"){
52.  
    po("×");
53.  
    }
54.  
    result.innerHTML = "√";
55.  
    }
56.  
     
57.  
    function c(){
58.  
    result.innerHTML = "";
59.  
    }
60.  
     
61.  
    function backspace(){
62.  
    var r = result.innerHTML;
63.  
    result.innerHTML = r.substr(0,r.length - 1);
64.  
    isEqual();
65.  
    }
66.  
     
67.  
    function equals1(){
68.  
    equal = true;
69.  
    var r = result.innerHTML;
70.  
    //将特殊字符进行替换
71.  
    r = r.replace(/×/g,"*");
72.  
    r = r.replace(/÷/g,"/");
73.  
    r = r.replace(/%/g,"*0.01");
74.  
    try{
75.  
    r = pow(r);
76.  
    r = sqrt(r);
77.  
    result.innerHTML=eval(r);
78.  
    }catch(e){
79.  
    result.innerHTML="表达式不正确";
80.  
    }
81.  
    }
82.  
     
83.  
    function pow(r){
84.  
    var arr = r.split("^");
85.  
    if (arr.length == 1){
86.  
    return r;
87.  
    }
88.  
    var leftstr = leftOperation(arr[0]);
89.  
    var rightstr = rightOperation(arr[1]);
90.  
    var num = "Math.pow(" leftstr "," rightstr ")";
91.  
    var leftr = arr[0].substring(0,arr[0].length - leftstr.length);
92.  
    var rightr = arr[1].substring(rightstr.length,arr[1].length);
93.  
    var r = leftr num rightr;
94.  
    return pow(r);
95.  
    }
96.  
     
97.  
    function sqrt(r){
98.  
    if (r.indexOf("√") == -1){
99.  
    return r;
100.  
     }
101.  
     var arr = r.split("√");
102.  
     var rightstr = rightOperation(arr[1]);
103.  
     var num = "Math.sqrt(" rightstr ")";
104.  
     var leftr = arr[0];
105.  
     var rightr = arr[1].substring(rightstr.length,arr[1].length);
106.  
     var r =leftr num rightr;
107.  
     return sqrt(r);
108.  
     }
109.  
      
110.  
     function leftOperation(r){
111.  
     var leftBracket = 0;
112.  
     var rightBracket = 0;
113.  
     var i;
114.  
     for (i = r.length - 1; i >=0; i--){
115.  
     var c = r.charAt(i);
116.  
     if (c == ")"){
117.  
     rightBracket ;
118.  
     } else if (leftBracket == rightBracket && c >="0" && c <= "9"){
119.  
     break;
120.  
     } else if (c == "("){
121.  
     leftBracket ;
122.  
     }
123.  
     }
124.  
     return r.substring(i);
125.  
     }
126.  
      
127.  
     function rightOperation(r){
128.  
     var leftBracket = 0;
129.  
     var rightBracket = 0;
130.  
     var i;
131.  
     for (i = 0; i < r.length; i ){
132.  
     var c = r.charAt(i);
133.  
     if (c == "("){
134.  
     leftBracket ;
135.  
     } else if (leftBracket == rightBracket && c >="0" && c <= "9"){
136.  
     break;
137.  
     } else if (c == ")"){
138.  
     rightBracket ;
139.  
     }
140.  
     }
141.  
     return r.substring(0,i 1);
142.  
     }

这篇好文章是转载于：学新通技术网