JavaScript实现简单的计算器

 使用grid布局，实现简单的计算器功能

html部分

<div class="calculatora">
        <div class="output" id="outputs"></div>
        <div class="input">
            <div class="input-top">
                <button class="shuzi">MC</button>
                <button class="shuzi">MR</button>
                <button class="shuzi">MS</button>
                <button class="shuzi">M+</button>
                <button class="shuzi">M-</button>
                <button class="shuzi" id="back" onclick="backspaces()">&larr;</button>
                <button class="shuzi" onclick="clears()">CE</button>
                <button class="shuzi" onclick="clears()">C</button>
                <button class="shuzi">&perp;</button>
                <button class="shuzi" onclick="radical()" value="gen">&radic;</button>
                <button class="shuzi" value="7" onclick="onnclick(this)">7</button>
                <button class="shuzi" value="8" onclick="onnclick(this)">8</button>
                <button class="shuzi" value="9" onclick="onnclick(this)">9</button>
                <button class="shuzi" onclick="onnclick(this)" value="/">/</button>
                <button class="shuzi" onclick="percentSign()" value="%">%</button>
                <button class="shuzi" value="4" onclick="onnclick(this)">4</button>
                <button class="shuzi" value="5" onclick="onnclick(this)">5</button>
                <button class="shuzi" value="6" onclick="onnclick(this)">6</button>
                <button class="shuzi" onclick="onnclick(this)" value="*">*</button>
                <button class="shuzi" onclick="semicolon()">1/X</button>
                <button class="shuzi" value="1" onclick="onnclick(this)">1</button>
                <button class="shuzi" value="2" onclick="onnclick(this)">2</button>
                <button class="shuzi" value="3" onclick="onnclick(this)">3</button>
                <button class="shuzi" value="-" onclick="onnclick(this)">-</button>
                <button class="dengyu" onclick="sultclick()" value="=">=</button>
                <button class="ling shuzi" value="0" onclick="onnclick(this)">0</button>
                <button class="shuzi" >.</button>
                <button value="+" onclick="onnclick(this)">+</button>
            </div>
        </div>

    </div>

css部分：

 * {
            padding: 0;
            margin: 0;
        }
        .calculatora {
            width: 400px;
            margin: 50% auto;
            background: #e5eefb;
        }
        .output {
            width: 90%;
            height: 60px;
            margin: 20px auto auto 20px;
            background: #fdfeff;
            font-size: 30px;
            float: left;
        }
        .input {
            width: 90%;
            display: flex;
            margin: auto;
        }
        .input-top {
            width: 100%;
            display: grid;
            margin-top: 10px;
            margin-bottom: 40px;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: 40px 40px 40px 40px 40px 40px;
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        .dengyu {
            grid-column: 5 / 6;
            grid-row: 5 / 7;
        }
        .ling {
            grid-column: 1 / 3;
            grid-row: 6 / 7;
        }

JS部分：

 //定义开关，点击等于后重置输出的值
    var kg = 0;
    //获取输入值
    function onnclick(values) {
    var sum = document.getElementById("outputs");
    console.log("a" + kg);
    if (kg == "0") {
        console.log("c" + kg);
        if (sum.innerHTML !== "0") {
            sum.innerHTML += values.value;
        }
        else {
            sum.innerHTML = "";
            sum.innerHTML += values.value;
        }
    }
    else if(values.value=="+"||values.value=="-"||values.value=="*"||values.value=="/"){
        kg = 0;
        console.log("b" + kg);
        // sum.innerHTML = "";
        sum.innerHTML += values.value;
    }
    else{
        kg = 0;
        console.log("b" + kg);
        sum.innerHTML = "";
        sum.innerHTML += values.value;
    }
}
//    console.log(sum);
//计算值
function sultclick() {
    var sum = document.getElementById("outputs");
    //eval():通过计算 string 得到的值
    var num = eval(sum.innerHTML);
    sum.innerHTML = num;
    kg = 1;
    console.log(kg);
}
//清除键
function clears() {
    var sum = document.getElementById("outputs");
    console.log("dianji")
    sum.innerHTML = "0";
}
//退格键
function backspaces(){
    var sum=document.getElementById("outputs");
    //s=s.Substring(0,s.Length-1)删除最后一个字符串
    var num=sum.innerHTML.substring(0,sum.innerHTML.length-1);
           sum.innerHTML=num;
}
//百分号
function percentSign(){
    var sum=document.getElementById("outputs");
    var num=sum.innerHTML/100;
    sum.innerHTML=num;
    kg = 1;
}
//根号
function radical(){
    var sum=document.getElementById("outputs");
    var num= Math.sqrt(sum.innerHTML);
    sum.innerHTML=num;
    kg = 1;
}
// 分号
function semicolon(){
    var sum=document.getElementById("outputs");
    var num= 1/sum.innerHTML;
    sum.innerHTML=num;
    kg = 1;
}

最后显示效果：