js之简易计算器

来源：互联网发布：网站授权码系统源码编辑：程序博客网时间：2024/05/22 10:58
用js实现简易计算器，附有详细代码。可以实现简单的数学算术运算，但是还是觉得里面有点小bag，接下来我会继续完善的。如果您有什么意见和建议，希望留言告诉我
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{margin: 0;            padding: 0;}        td{width: 80px;height:80px;}        tr:nth-child(2) td{height:50px;}        input[type="text"]{width: 340px;height: 82px;text-align: right;            font-size: 30px;line-height: 82px}        input[type="button"]{width: 84px;height: 84px;text-align: center;            font-size: 30px;line-height: 82px}        tr:nth-child(2) input[type="button"]{width: 170px;height: 50px;text-align: center;            font-size: 30px;line-height: 52px}    </style></head><body>    <table border="1" cellpadding="0" cellspacing="0">        <tr>            <td colspan="4"><input type="text" id="btn" value="" disabled/></td>        </tr>        <tr>            <td colspan="2"  height="50"><input type="button" class="btn" value="C"/></td>            <td colspan="2" ><input type="button" class="btn" value="D"/></td>        </tr>        <tr>            <td><input type="button" class="btn" value="7"/></td>            <td><input type="button" class="btn" value="8"/></td>            <td><input type="button" class="btn" value="9"/></td>            <td><input type="button" class="btn" value="/"/></td>        </tr>        <tr>            <td><input type="button" class="btn" value="4"/></td>            <td><input type="button" class="btn" value="5"/></td>            <td><input type="button" class="btn" value="6"/></td>            <td><input type="button" class="btn" value="*"/></td>        </tr>        <tr>            <td><input type="button" class="btn" value="1"/></td>            <td><input type="button" class="btn" value="2"/></td>            <td><input type="button" class="btn" value="3"/></td>            <td><input type="button" class="btn" value="-"/></td>        </tr>        <tr>            <td><input type="button" class="btn" value="0"/></td>            <td><input type="button" class="btn" value="."/></td>            <td><input type="button" class="btn" value="+"/></td>            <td><input type="button" class="btn" value="="/></td>        </tr>    </table>    <script>        window.onload=function(){            var btn =document.getElementsByClassName("btn");            var result=document.getElementById("btn");            var arr=[];            for(var i=0;i<btn.length;i++){                btn[i].onclick=function(){                  if(!isNaN(this.value)||this.value=="."){//只能输入数字和小数点      if(result.value.indexOf(" ")==-1){}else    result.value="";
                      if(result.value.indexOf(".")==-1){//判断小数点的个数                          result.value+=this.value;                      }else{                          if(this.value!="."){                              result.value+=this.value;                          }                      }                  }                    if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){//将数字和运算符号存入数组中，方便运算。                        arr[arr.length]=result.value;                        arr[arr.length]=this.value;                        result.value="";                       // console.log(arr[0])                       if(arr[arr.length-3]=="+"||arr[arr.length-3]=="-"||arr[arr.length-3]=="*"||arr[arr.length-3]=="/"){                           arr.splice(arr.length-3,2)                       }                        if(arr[0]==""&&arr[1]=="+"||arr[0]==""&&arr[1]=="-"||arr[0]==""&&arr[1]=="*"||arr[0]==""&&arr[1]=="/"){                            arr.splice(0,1,"0")                        }                    }                    if(this.value=="="){//计算                        var str="";                        arr[arr.length]=result.value;                       console.log(arr);                        for(var a in arr){                            str+=arr[a];                        }                        result.value=eval(str);                        arr=[];                    }                        if(this.value=="C"){//清空                            result.value="";                            arr=[];                    }                    if(this.value=="D"){//删除最后一个数字                        result.value=  result.value.substr(0,result.value.length-1)                    }                }            }        }    </script></body></html>
阅读全文
0 0