Javascript计算器

最新推荐文章于 2023-12-01 19:30:20 发布

梵海pp

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量580

点赞数

分类专栏： javascript 文章标签： javascript 计算器源代码表格布局运算器

本文链接：https://blog.csdn.net/m0_37460263/article/details/73459993

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用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>

这里写图片描述

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

梵海pp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript计算器

用Javascript实现一个基本的运算器使用表格布局，JS添加事件<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>计算器</title></head><style> *{ margin: 0; padding: 0; } table
复制链接

扫一扫