Javascript实例之如何实现最基本的运算器

黄舟原创: 2017-07-17 11:44:12 824浏览

这篇文章主要为大家详细介绍了Javascript实现基本运算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

用Javascript实现一个基本的运算器，具体内容如下

使用表格布局，JS添加事件

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>计算器</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  table{
    width:400px;
    height: 600px;
    border-collapse: collapse;
    margin: auto;
  }
  .trr{
    width: 400px;
    height: 100px;
  }
  .trr1{
    width: 400px;
    height: 50px;
  }
  .tdd{ width: 100px;
    height: 100px;
    border: 1px solid silver;
    text-align: center;
    line-height: 100px;

  }
  .btn{
    width: 100%;
    height: 100%;
    font-size: 2.5em;
  }
  .btn1{
    width: 100%;
    height: 100%;
    font-size: 2.5em;
  }
  .tdd1{
    width: 100px;
    height: 50px;
  }
  .text{
    height: 100%;
    font-size: 2.5em;
    text-align: right;
  }

</style>
<body>
<table>

  <tr class="trr text1">
    <td class="tdd" colspan="4"><input class="text" type="text" disabled value="0" /></td>
  </tr>

  <tr class="trr1">
    <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="c"/></td>
    <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="d"/></td>
  </tr>

  <tr class="trr">
    <td class="tdd"><input class="btn" type="button" value="7"/></td>
    <td class="tdd"><input class="btn" type="button" value="8"/></td>
    <td class="tdd"><input class="btn" type="button" value="9"/></td>
    <td class="tdd"><input class="btn" type="button" value="//m.sbmmt.com/m/"/></td>
  </tr>

  <tr class="trr">
    <td class="tdd"><input class="btn" type="button" value="4"/></td>
    <td class="tdd"><input class="btn" type="button" value="5"/></td>
    <td class="tdd"><input class="btn" type="button" value="6"/></td>
    <td class="tdd"><input class="btn" type="button" value="*"/></td>
  </tr>

  <tr class="trr">
    <td class="tdd"><input class="btn" type="button" value="1"/></td>
    <td class="tdd"><input class="btn" type="button" value="2"/></td>
    <td class="tdd"><input class="btn" type="button" value="3"/></td>
    <td class="tdd"><input class="btn" type="button" value="-"/></td>
  </tr>

  <tr class="trr">
    <td class="tdd"><input class="btn" type="button" value="0"/></td>
    <td class="tdd"><input class="btn" type="button" value="."/></td>
    <td class="tdd"><input class="btn" type="button" value="+"/></td>
    <td class="tdd"><input class="btn" type="button" value="="/></td>
  </tr>
</table>
<script>
  var obtn=document.getElementsByClassName("btn");
  var otext=document.getElementsByClassName("text")[0];
  var arr=[];//定义一个数组，向其中存入数字和运算符。

  for(var i=0;i<obtn.length;i++){
    obtn[i].onclick= function () { 
      if(!isNaN(this.value)||this.value=="."){ //this:代表鼠标点击的obtn
          if(otext.value.indexOf(".")==-1){ //消除重复"."的BUG   
           if(otext.value.length==0){  
            if(this.value!="0"){             //----------------------
              otext.value+=this.value;         //|
           }                        //|
           }                        //|
           else if(otext.value.length==1&&otext.value=="0"){//|
            otext.value=this.value;            //|
           }                        //|
           else if(otext.value.length==1&&otext.value!="0"){//初始状态时，若计算器屏幕为"0",
            otext.value+=this.value;           //实现输入一个非零数字的时候，计算器
           }                        //上的数值替换为输入的非零值
           else if(otext.value.length>1){          //|
             otext.value+=this.value;           //|
           }                        //--------------------
          }
          else
          {
            if(this.value!="."){  //消除重复"."的BUG
              if(otext.value.length==0){
               if(obtn[i].value!="0"){
                otext.value+=this.value;
              }
             }
              if(otext.value.length>=1){
               otext.value+=this.value;
              }                       
            }
          }
      }
      if(this.value=="//m.sbmmt.com/m/"||this.value=="*"||this.value=="+"||this.value=="-"){


        if(otext.value!="0"&&otext.value!=""&&otext.value!="-"){  
                            //消除输入重复运算符的BUG，
          arr[arr.length]=otext.value;    //当输入一个运算符的时候，otext内的value值
          arr[arr.length]=this.value;     //为""(空)，所以判断条件为若otext内的value值不为空
          otext.value="";           //则向数字中传值。
        }                    //此时出现无法输入负数值运算的BUG


        else if(otext.value==""&&this.value=="-"){ //消除无法输入负数值运算的BUG
          otext.value=this.value;        //当点击运算符后otext的value值为空，
        }                     //此时判断若this的值为"-",就替换进去。
        else if(otext.value=="0"&&this.value=="-"){//此时出现无法执行类似"3--3"的双减法运算BUG，
          otext.value=this.value;        //因为eval()无法识别有双减的字符串值。
        }                     //若初始时，otext值为"0"，并且this的值为
      }                       //"-",则用"-"替换otext中的值。



      if(this.value=="="){
        if(otext.value.length>=1){            //--------------------
          var string="";                //|
           if(arr[arr.length-1]=="-"&&otext.value<0){ //→消除无法执行类似"3--3"的双减法运算的BUG
            arr[arr.length-1]="+";          //→当输入负数值的时候，判断arr数组中的
            otext.value=Math.abs(otext.value);    //→末尾值是否为"-"，若为"-"则把其改为"+",
           }                      //→并且让otext.value值取绝对值。
          arr[arr.length]=otext.value;         //|
          for(var i=0;i<arr.length;i++){        //|
            string+=arr[i];             //|
          }                      //|把存入数组中的数字和运算符遍历存储到一个字符串中，
          otext.value=eval(string);          //|直接使用eval()方法就可以识别一个的字符串，执行
          arr=[];                   //|该字符串中的运算
        }                        //|
      }                          //---------------------
      if(this.value=="c"){
        otext.value="0";
        arr=[];
      }
      if(this.value=="d"){
        otext.value=otext.value.substr(0,otext.value.length-1);//每一次删除otext中的末尾值
        if(otext.value==""){                  //当把otext中的值删除完后，给
          otext.value="0";                  //otext复值"0".
        }
      }
    }
  }
</script>
</body>
</html>