使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。

最新推荐文章于 2023-06-05 16:55:03 发布

Codingwithlife

最新推荐文章于 2023-06-05 16:55:03 发布

阅读量2.5k

点赞数 3

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44164982/article/details/107878823

版权

js 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前言

这里推荐一个在线制作gif的网站：免费动图在线制作工具 - 在线视频转gif动态图片 - 本地mp4无损快速转换一键下载 - soogif动图 https://www.soogif.com/video。录屏的话可以搜索，下载免费的轻量级录屏工具FSCapture

效果

能够实现正确的加减乘除，实现退格和清零。

优点

代码思路简单，使用js基础知识即可完成，实现运算主要借助字符串的方法。

//退格
var str="12345678";
console.log(str.substr(2,4));//从第3个字符开始截取，截取4个字符
console.log(str.substring(2,4));//从第3个字符开始截，截取到第4个字符
console.log(str.slice(2,4)); // 从第3个字符开始截取到第4个字符
//计算结果
var str1="6+7+8/2";
console.log(typeof eval(str1))//number类型 17

具体实现：

（1）HTML部分

<body>
    <table>
        <tr>
             <td colspan="4"><input  class="txt" type="text" disabled></td>
        </tr>
        <tr>
            <td colspan="2"><input class="btn-click cal" type="button" value="AC"></td>
            <td colspan="2"><input class="btn-click cal" type="button" value="DEL"></td>
        </tr>
        <tr>
            <td><input class="btn" type="button" value="7"></td>
            <td><input class="btn" type="button" value="8"></td>
            <td><input class="btn" type="button" value="9"></td>
            <td><input class="btn cal" type="button" value="*"></td>
        </tr>
        <tr>
            <td><input class="btn" type="button" value="4"></td>
            <td><input class="btn" type="button" value="5"></td>
            <td><input class="btn" type="button" value="6"></td>
            <td><input class="btn cal" type="button" value="/"></td>
        </tr>
        <tr>
            <td><input class="btn" type="button" value="1"></td>
            <td><input class="btn" type="button" value="2"></td>
            <td><input class="btn" type="button" value="3"></td>
            <td><input class="btn cal" type="button" value="-"></td>
        </tr>
        <tr>
            <td><input class="btn" type="button" value="0"></td>
            <td><input class="btn cal" type="button" value="."></td>
            <td><input class="btn cal" type="button" value="+"></td>
            <td><input class="btn cal" type="button" value="="></td>
        </tr>
    </table>
</body>

（2）CSS部分

         *{margin:0; padding:0;}
        table{ border-collapse: collapse; margin:50px auto;}
        input{background-color: #f5f5f5;}
        input:hover{box-shadow:2px -2px 2px #f5851b;}
        td{width: 100px;height:70px;line-height: 60px;}
        .btn{width: 100px;height:70px;line-height: 60px;font-size: 30px;}
        .btn-click{width: 202px;height:70px;line-height: 60px;font-size: 24px;}
        .cal{color:#f5851b}
        .txt{width: 400px;height: 80px;font-size:40px;text-align: right;}

（3）JS部分：

 <script>
       
        var arr=[];//定义一个数组，接收用户输入的符号和数字
         //获取普通按键的值
        var btn=document.getElementsByClassName("btn");
        //获取结果显示区
        var txt=document.getElementsByClassName("txt")[0];
        //获取清空退格按钮的值
        var btn1=document.getElementsByClassName("btn-click");
        //清空退格功能
        for(var i=0;i<btn1.length;i++){
           btn1[i].onclick=function(){
               if(this.value=="AC"){
                   txt.value="";
               }else{
                    // str.substr(2,4) 从第3个字符开始截取，截取4个字符
                    //str.substring(2,4) 从第3个字符开始截，截取到第4个字符
                    //str.slice(2,4) 从第3个字符开始截取到第4个字符,与substring()类似
                    txt.value=txt.value.slice(0,txt.value.length-1)
               }
           }
       }
       //主体计算功能
        for(var i=0;i<btn.length;i++){
             btn[i].onclick=function(){
                 //<1的小数省略0直接输.,结果默认为0
                if(txt.value==""&&this.value==".") {
                        txt.value=0;
               }       
                else{
                    //判断输入数字或小数点情况
                    if(!isNaN(this.value)||(this.value==".")){
                       
                            if(txt.value.indexOf(".")!=-1){// //!=-1则已经输入过小数点     indexOf()查找字符，如果有返回位置，没有返回-1
                                if(this.value!="."){//当前输入不是小数点
                                    txt.value+=this.value;// 字符串拼接
                                }else if(this.value=="."){ //当前输入的是小数点不执行操作
                                    
                                }
                            }else{ //没有小数点存在，则直接拼接
                                txt.value+=this.value;
                            }           
                    }else{ //输入的是符号
                            if(this.value!="="){// 输入的是运算符不是“=”
                                arr[arr.length]=txt.value;//存原来显示区的值
                                arr[arr.length]=this.value;//存输入的符号
                                txt.value="";//清屏
                            }else{//输入的是“=”
                                arr[arr.length]=txt.value;//存原先显示区的值
                                txt.value=eval(arr.join(""));//join()将数字与运算符连接，eval()对字符串进行计算，返回计算得到number类型的值。
                                arr=[];//计算之后数组清空
                            }
                    }
                }
         }
    }
 
    </script>