前端學習(1629):前端系列實戰課程之運算控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oNum1 = document.getElementById('num1');
            var oNum2 = document.getElementById('num2');
            var oBtn = document.getElementById('btn');
            var oS = document.getElementById('sele');
            oBtn.onclick = function() {
                var iNum1 = parseFloat(oNum1.value);
                var iNum2 = parseFloat(oNum2.value);
                switch (oS.value) {
                    case '+':
                        console.log(iNum1 + iNum2);
                        break;
                    case '-':
                        console.log(iNum1 - iNum2);
                        break;
                    case 'x':
                        console.log(iNum1 * iNum2);
                        break;
                    case '/':
                        console.log(iNum1 / iNum2);
                        break;
                }
            }
        }
    </script>
</head>

<body>

    <input type="text" id="num1">
    <select name="" id="sele">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="x">x</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="num2">
    <input type="button" value="計算" id="btn">
</body>

</html>

運行結果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章