使用JavaScript实现简易计算器

蔚落 2022-12-13 04:54 197阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body,html{
                height: 100%;
            }
            .box{
                width:100%;
                height: 100%;      
                background:rgb(170, 212, 157);
                overflow: hidden;
            }
            .b_center{
                width: 400px;
                height: 400px;
                margin:80px auto 0 auto;
                background: rgb(141, 199, 216);
            }
            .b_center p{
                font-size:28px;
                color: bisque;
                line-height: 40px;
            }
            .calc{
                width: 260px;
                height: 180px;
                margin: 80px auto 0 auto;
            }
            #result{
                width: 260px;
                height: 28px;
                font-size: 24px;
                line-height: 28px;
                color: black;
            }
            #btn{
                padding: 0;
                border:0;
                box-sizing:border-box; 
                width: 59px;
                height: 36px;
                margin: 4px 2px 4px 0px;
                font-size: 20px;
                color: #fff;
                background: rgb(93, 145, 158);
            }
             #btn:nth-of-type(4n){
                width: 62px;
                margin-right: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="b_center">
                <p>我的计算器</p>
                <div class="calc">
                
                <input id="result" value="0"> 
                
                <button id="btn" value="7" onclick="say('7')">7</button>
                <button id="btn" value="8" onclick="say('8')">8</button>
                <button id="btn" value="9" onclick="say('9')">9</button>
                <button id="btn" value="+" onclick="say('+')">+</button>
                <button id="btn" value="4" onclick="say('4')">4</button>
                <button id="btn" value="5" onclick="say('5')">5</button>
                <button id="btn" value="6" onclick="say('6')">6</button>
                <button id="btn" value="-" onclick="say('-')">-</button>
                <button id="btn" value="1" onclick="say('1')">1</button>
                <button id="btn" value="2" onclick="say('2')">2</button>
                <button id="btn" value="3" onclick="say('3')">3</button>
                <button id="btn" value="*" onclick="say('*')">*</button>
                <button id="btn" value="0" onclick="say('0')">0</button>
                <button id="btn" value="C" onclick="say('C')">C</button>
                <button id="btn" value="=" onclick="say('=')">=</button>
                <button id="btn" value="/" onclick="say('/')">/</button>
            </div>
        </div>
    </body>
    <script>
        //在js中找到id名为result的标签,方便以后通过value对其赋值
            var resultInput=document.getElementById("result")
            //立一个旗帜用于使数字可以连续输入,所以应当只有当键入为0-9时起作用
            var isContinue=false;
            //用来接收计算时运算符之前的值
            var beforeName="";
            //用来接收运算符
            var opt="";
        function say(value){
            //根据所按按钮的value值,找到switch对应的case值,并进行相应操作
            switch(value){
                case "+":
                case "-":
                case "*":
                case "/":
            //当所按的是运算符时,opt接收运算符,并将之前的键入的数字值resultInput.value
            //传到beforeName中接收
                    opt=value;
                    beforeName=resultInput.value;
                    isContinue=false;
                    break;
                case "=":
             //当所按的是=时,调用calc函数进行计算,参数分别为第一次传入的数,第二次传入的数和运算符,
             //并将结果通过value使文本框获取最终结果
                    resultInput.value=calc(beforeName,resultInput.value,opt);
                    isContinue=false;
                    break;
                case "C":
            //当所按的是清零时,之前传入的数,运算符,第二次传入的数都应该进行清空
                    beforeName="";
                    opt="";
                    resultInput.value="";
                    isContinue=false;
                    break;
                default:
            //default代表其他情况,此时只剩下0-9
            //当第一次进入此处时,flag一定为false,所以一定进入else语句中,使
            //其通过赋值使文本框传入当前的value值,然后 isContinue旗帜为true
            //如果下一次再次按数字进入此处,则进入isContinue==true语句,进行字
            //符的拼接,并显现出来
                    if(isContinue==true){
                        resultInput.value+=value;
                    }else{
                        resultInput.value=value;
                    }
                    isContinue=true;
                    break;
            }
        }
    
        //两数进行计算的函数
        function calc(num1,num2,opt){
            var result=0;
        //因为计算的值都是从h5标签中传入的,所以得到的都是字符串类型的数字,
        //可以通过Number进行强制转换变成数字型.-,/,*可以不用强制转化,因为
        //它们具有隐式装换,使其自动变为数字型,而+却不行
            switch(opt){
                case "+":
                    result= Number(num1)+Number(num2);
                    break;
                case "-":
                    result= Number(num1)-Number(num2);
                    break;
                case "*":
                    result= Number(num1)*Number(num2);
                    break;
                case "/":
                    result=  Number(num1)/Number(num2);
                    break;
            }
            return result;
        }
    </script>
    </html>