JavaScript实现简易计算器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn" onclick="add()">加</button>
    <button id="minus-btn" onclick="minus()">减</button>
    <button id="times-btn" onclick="multiply()">乘</button>
    <button id="divide-btn" onclick="divide()">除</button>
    <p id="result">运算结果</p>
    <script>
        function add() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
        }
        function minus() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
        }
        function multiply() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
        }
        function divide() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / parseInt(document.getElementById("second-number").value)); 
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script>
        var btn1 = document.querySelector("#add-btn");
        var btn2 = document.querySelector("#minus-btn");
        var btn3 = document.querySelector("#times-btn");
        var btn4 = document.querySelector("#divide-btn");
        function add() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
        }
        function minus() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
        }
        function times() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
        }
        function divide() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / parseInt(document.getElementById("second-number").value)); 
        }
        btn1.addEventListener("click", add);
        btn2.addEventListener("click", minus);
        btn3.addEventListener("click", times);
        btn4.addEventListener("click", divide);
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script>
        var btn1 = document.querySelector("#add-btn");
        var btn2 = document.querySelector("#minus-btn");
        var btn3 = document.querySelector("#times-btn");
        var btn4 = document.querySelector("#divide-btn");
        function add() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
        }
        function minus() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
        }
        function times() {
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
        }
        function divide() {
            var divisor = parseInt(document.getElementById("second-number").value);
            try {
                if (divisor == 0) {
                    throw "除数不能为零！";
                }
            } catch (error) {
                console.log(error);
            }
            document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / divisor); 
        }
        btn1.addEventListener("click", add);
        btn2.addEventListener("click", minus);
        btn3.addEventListener("click", times);
        btn4.addEventListener("click", divide);
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script>
        var btn1 = document.querySelector("#add-btn");
        var btn2 = document.querySelector("#minus-btn");
        var btn3 = document.querySelector("#times-btn");
        var btn4 = document.querySelector("#divide-btn");
        function add() {
            return (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
        }
        function minus() {
            return (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
        }
        function times() {
            return (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
        }
        function divide() {
            var divisor = parseInt(document.getElementById("second-number").value);
            try {
                if (divisor == 0) {
                    throw "除数不能为零！";
                }
            } catch (error) {
                console.log(error);
            }
            return (parseInt(document.getElementById("first-number").value) / divisor); 
        }
        btn1.addEventListener("click", add);
        btn2.addEventListener("click", minus);
        btn3.addEventListener("click", times);
        btn4.addEventListener("click", divide);
        btn1.addEventListener("click", function() {
            document.getElementById("result").innerHTML = add();
        });
        btn2.addEventListener("click", function() {
            document.getElementById("result").innerHTML = minus();
        });
        btn3.addEventListener("click", function() {
            document.getElementById("result").innerHTML = times();
        });
        btn4.addEventListener("click", function() {
            document.getElementById("result").innerHTML = divide();
        });
    </script>
</body>

</html>

JavaScript实现简易计算器

猜你喜欢