JS简易计算器的实现，以及代码的优化

用JS实现简易计算器

首先创建结构和样式

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</style>
        body{
            margin:0;
            padding
            background-color #abcdef;
        }
        .cal
            width560px
            height100px0 auto
            padding-top300px}
    body>

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


>

html>

添加javascript功能

="+"="btn"="-"="*"="/">
    var cal=document.querySelector(".cal);
     num1cal.querySelector(.num1 num2.num2 sign.sign res.res);

     btnscal.querySelectorAll(.btn);

    btns[].onclickadd;
    btns[1subtract;
    btns[2multiply;
    btns[3divide;

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

代码的优化：

循环实现绑定

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

="btn" title="add"="subtract"="multiply"="divide"="%"="mod"给每个按钮绑定事件
    for( i;i<btns.length;i++){
        operate(i);
    }

    运算函数
     operate(i){
         opbtns[i].value;获取运算
         opNamebtns[i].title;获取运算名
        绑定事件
        btns[i].onclick(){
            sign.innerHTMLop;
            res.innerHTMLoperation[opName](Number(num1.value),Number(num2.value));
        }
    }

     operation{
        add:(n1,n2){
            return n1n2;
        },subtract:n2;
        },给一个新增运算的接口
        addOperation:(name,fn){
            如果该运算不存在
            if!this.name){
                [name]fn;
            }
        }
    }

    新增取余运算
    operation.addOperation(mod,n2){
        %n2;
    });
>

JS简易计算器的实现，以及代码的优化

相关文章