JavaScript实现简易计算器

阳光穿透心脏的1/2处 2022-05-21 02:56 268阅读 0赞

![70][]

<!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>

[70]: /images/20220521/7d56a4fe0b7244569b01340080088860.png