欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-11 10:08:09
...
这篇文章主要为大家详细介绍了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="/"/></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=="/"||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>

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

计算器的”c”功能为清屏；”d”功能为删除一个数；

以上就是Javascript实例之如何实现最基本的运算器的详细内容，更多请关注其它相关文章！

相关标签： Javascript js 基本

上一篇： PHP单例模式的简单用法分享

下一篇： php如何计算图片大小的函数

推荐阅读