js制作简单计算器

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

vernin

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

阅读量2k

点赞数 2

文章标签： js javascript html5

本文链接：https://blog.csdn.net/weixin_48165407/article/details/115056464

版权

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

先看看效果

在这里插入图片描述

实现原理

其实制作这个简单的计算器思路很简单，就是给这些数字按钮（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>
        <!-- 计算器显示框 id为txt -->
        <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">
            <!-- “=”的按钮，设置id为result -->
            <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>

vernin

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js制作简单计算器

在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！先看看效果实现原理其实制作这个简单的计算器思路很简单，就是给这些数字按钮（1234567890），和加减乘除按钮（+ - * /）都绑定onclick事件，这些按钮点击的目的就是要把自己value值放到上面显示器上(txt)，其他的按钮就是处理显示器（txt）上的value值：AC键可以把之前输入的数据全部清除。“=”键就是计算我们输入的数据，“<
复制链接

扫一扫