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>
</head>

<body>
    <input type="text" id="fir">
    <select>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="sec">
    <button>=</button>
    <input type="text" id="res">
    <script>
        //用户 在 前两个input中  输入数字  点击等号按钮  根据select中的运算符 进行指定的运算 并将结果显示在第三个input中
        //1.获取元素
        var inps = document.getElementsByTagName("input");
        var btn = document.getElementsByTagName("button")[0];
        var sel = document.getElementsByTagName("select")[0];
        //2.给按钮 添加 点击事件
        btn.onclick = function(){
            //3.获取运算符 
            var logo = sel.value;
            var num1 = Number(inps[0].value);
            var num2 = parseFloat(inps[1].value);
            //4.进行计算  根据运算符 进行相应的计算
            switch(logo){
                case "+" : inps[2].value = num1+num2; break;
                case "-" : inps[2].value = num1-num2; break;
                case "*" : inps[2].value = num1*num2; break;
                case "/" : inps[2].value = num1/num2; break;
            }

        }


    </script>
</body>

</html>

 

posted @ 2020-09-17 09:39  石海莹  阅读(254)  评论(0)  编辑  收藏  举报