• 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>
  • 相关阅读:
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    volcanol的工控博客
    Oracle分析函数-排序排列(rank、dense_rank、row_number、ntile)
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13683421.html
Copyright © 2020-2023  润新知