JS实现简易计算器

用JS实现简易计算器

首先创建结构和样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
        </p>            
    </div>
<script>


</script>

</body>
</html>

然后添加Java script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn">
            <input type="button" value="-" class="btn">
            <input type="button" value="*" class="btn">
            <input type="button" value="/" class="btn">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    btns[0].onclick=add;
    btns[1].onclick=subtract;
    btns[2].onclick=multiply;
    btns[3].onclick=divide;

    function add(){
        sign.innerHTML="+";
        //由于DOM获取到的值都是字符串形式,因此进行操作时需要先转为number类型
        res.innerHTML=Number(num1.value)+Number(num2.value);
    }
    function subtract(){
        sign.innerHTML="-";
        res.innerHTML=Number(num1.value)-Number(num2.value);
    }
    function multiply(){
        sign.innerHTML="*";
        res.innerHTML=Number(num1.value)*Number(num2.value);    
    }
    function divide(){
        sign.innerHTML="/";
        res.innerHTML=Number(num1.value)/Number(num2.value);    
    }
</script>

</body>
</html>

代码的优化:

循环实现绑定

给一个外部接口,用于新增运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn" title="add">
            <input type="button" value="-" class="btn" title="subtract">
            <input type="button" value="*" class="btn" title="multiply">
            <input type="button" value="/" class="btn" title="divide">
            <input type="button" value="%" class="btn" title="mod">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    //给每个按钮绑定事件
    for(var i=0;i<btns.length;i++){
        operate(i);
    }

    //运算函数
    function operate(i){
        var op=btns[i].value;//获取运算
        var opName=btns[i].title;//获取运算名
        //绑定事件
        btns[i].onclick=function(){
            sign.innerHTML=op;
            res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
        }
    }

    var operation={
        add:function(n1,n2){
            return n1+n2;
        },
        subtract:function(n1,n2){
            return n1-n2;
        },
        multiply:function(n1,n2){
            return n1*n2;
        },
        divide:function(n1,n2){
            return n1/n2;
        },
        //给一个新增运算的接口
        addOperation:function(name,fn){
            //如果该运算不存在
            if(!this.name){
                this[name]=fn;
            }
        }
    }

    //新增取余运算
    operation.addOperation("mod",function(n1,n2){
        return n1%n2;
    });
</script>

</body>
</html>

这样就圆满完成咯

发布了44 篇原创文章 · 获赞 60 · 访问量 9297
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 岁月 设计师: pinMode

分享到微信朋友圈

×

扫一扫,手机浏览