计算器

95 阅读1分钟
<body>
    <div class=" calculator">
        <label for="inp1">num1:
            <input type="text" id="inp1">
        </label>
        <select name="" id="sec">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <label for="inp2">num2:
            <input type="text" id="inp2">
        </label>
        <button id='btn'>=</button>
        <label for="inp3"> 结果:
            <input type="text" id="inp3">
        </label>
    </div>

    <script>
        // 查找到元素
        var inp1 = document.getElementById('inp1');
        var inp2 = document.getElementById('inp2');
        var result = document.getElementById('inp3');
        // 查找按钮和select
        var btn = document.getElementById('btn');
        var sec = document.getElementById('sec');
        // 单击按钮 添加一个点击事件
        btn.onclick = function () {
            switch (sec.value) {
                case '+':
                    result.value = parseFloat(inp1.value) + parseFloat(inp2.value);
                    break;
                case '-':
                    result.value = inp1.value - inp2.value;
                    break;
                case '*':
                    result.value = inp1.value * inp2.value;
                    break;
                case '/':
                    result.value = inp1.value / inp2.value;
                    break;
                case '%':
                    result.value = inp1.value % inp2.value;
                    break;
                default:
                    result.value = parseFloat(inp1.value) + parseFloat(inp2.value);
                    break;
            }
        }
    </script>
</body>