js制作简单计算器

电玩女神 2022-11-12 01:45 166阅读 0赞

在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！

### 先看看效果 ###

![在这里插入图片描述][20210321212336186.gif_pic_center]

### 实现原理 ###

其实制作这个简单的计算器思路很简单，就是给这些数字按钮（1234567890），和加减乘除按钮（+ - \* /）都绑定onclick事件，这些按钮点击的目的就是要把自己value值放到上面显示器上(txt)，其他的按钮就是处理显示器（txt）上的value值：AC键可以把之前输入的数据全部清除。“=”键就是计算我们输入的数据，“<<”键把去掉显示器value最后一位去掉。  
这里需要用eval()方法，eval()方法可以计算括号里面的表达式：

var str = "2+2*4";
            console.log(eval(str));//10

这样我们就可以把显示器里的表达式传给它，它就会帮我们计算结果了。  
里面还需要用到slice()，slice(start,end)里面有两个参数，就是截取开始位置和结束的位置（结束位置可以不写，不写就是后面的都要），截取字符串里的某一个片段：

var str = "hello wrold!";
            var com = str.slice(6,11);
            var com1 = str.slice(6);//从第六位开始截取，后面全要
            console.log(com);  //world
            console.log(com1); //world!

了解这两个方法之后，来做这个计算器就很简单了。

### 完整代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js制作简单计算器</title>
        <style>
            #jsq{ 
                width: 310px;
                height: 480px;
                padding: 5px 0px;
                background-color: mediumorchid;
                border-radius: 5%;
                text-align: center;
                box-shadow: 0px 5px 20px;/*给计算器一些阴影，看起来有立体感*/  
            }
            #txt{ 
                width: 220px;
                height: 38px;
                border: none;
                border-radius: 10px 0px 0px 10px;/*给input文本框的左上角和左下角设置圆角*/
                box-shadow: 0px 5px 10px;
                outline: none;
                text-align: right;
                font-size: 24px;
            }
            #dele{ 
                display: inline-block;
                height: 40px;
                background-color: #fff;
                border: none;
                padding-top: 9px;
                outline: none;
                border-radius: 0px 10px 10px 0px;/*给ibutton的右上角和右下角设置圆角*/
                color: red;
            }
            .btn{ 
                background-color: #fff;
                outline: none;
                width: 60px;
                height: 60px;
                border: 1px solid yellowgreen;
                border-radius: 15px;
                margin-top: 10px;
                box-shadow: 0px 5px 15px;/*给按钮一些阴影，看起来有立体感*/
                font-size: 18px;
                background-color: slategray;
            }
            .first{ 
                background-color: red;
            }
            .ling{ 
                width: 125px;
            }
        </style>
    </head>
    <body>
        <div id="jsq">
            <h2>javascript简单计算器</h2>
            
            <input type="text" id="txt"><button id="dele"><strong><<</strong></button>
            <div>
                <input type="button" value="AC" class="btn first">
                <input type="button" value="ON" class="btn">
                <input type="button" value="OFF" class="btn">
                <input type="button" value="+" class="btn nuber"><br>
                <input type="button" value="7" class="btn nuber">
                <input type="button" value="8" class="btn nuber">
                <input type="button" value="9" class="btn nuber">
                <input type="button" value="*" class="btn nuber"><br>
                <input type="button" value="4" class="btn nuber">
                <input type="button" value="5" class="btn nuber">
                <input type="button" value="6" class="btn nuber">
                <input type="button" value="-" class="btn nuber"><br>
                <input type="button" value="1" class="btn nuber">
                <input type="button" value="2" class="btn nuber">
                <input type="button" value="3" class="btn nuber">
                <input type="button" value="/" class="btn nuber"><br>
                <input type="button" value="0" class="btn nuber ling">
                <input type="button" value="." class="btn nuber">
                
                <input type="button" value="=" class="btn" id="result">
            </div>
        </div>
        <script>
            var nub = document.getElementsByClassName('nuber');
            var ac = document.getElementsByClassName('first')[0];
            var rs = document.getElementById('result');
            var txt = document.getElementById('txt');
            var de = document.getElementById('dele');
            //用for循环给所有class为nuber的标签绑定onclick事件，
            //执行dis方法且把自己的value当作实参传入dis方法中
            for(let i =0;i<nub.length;i++){ 
                nub[i].onclick = function(){ 
                    dis(this.value);
                }
            }
            //dis方法就是改变txt的value，使用形参，让nub把自己的value传进来
             function dis(va){ 
                txt.value += va;
            }
            //lete方法是接收删除后的数据
            function lete(bb){ 
                txt.value = bb;
            }
            //“AC”的点击事件，当点击AC时，把txt里的value为空
            ac.onclick = function(){ 
                txt.value = "";
            }
    
            //给“=”按钮绑定添加onclick事件，
            rs.addEventListener('click',function(){ 
                var result = txt.value;
                txt.value = "";
                txt.value = eval(result); //eval()方法可以执行JavaScript代码或表达式
            },false)
            
            //删除键添加onclick事件，方法里取出txt的value值，把value值转换成字符串
            //再使用slice把字符串最后一位去掉，剩下的再返给txt。
            de.addEventListener('click',function(){ 
                var vl = txt.value;
                var aa = String(vl);
                var ff = aa.slice(0,aa.length-1); 
                lete(ff);    
            },false)
            
        </script>
    </body>
    </html>

[20210321212336186.gif_pic_center]: /images/20221022/990f40a4b4da4b5fba16dfee05bcd557.png