js实现简易计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46578318/article/details/117690273

这是一个使用HTML、CSS和JavaScript实现的简单在线计算器。用户可以输入两个数字，选择加、减、乘、除或取余数操作，点击计算按钮即可得到结果。代码中限制了输入只能为数字，并对结果进行了三位小数的四舍五入处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        select{
            width: 100px;
        }
        form{
            margin-top: 100px;
        }
        input{
            border-color: chartreuse;
        }
    </style>
</head>
<body>
    <center>
        <form>
            <input type="text" id="number1" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57) event.returnValue=false" onchange="get_sum()">
            <select id="operator" onchange="get_sum()">
                <option value="1">+</option>
                <option value="2">-</option>
                <option value="3">*</option>
                <option value="4">/</option>
                <option value="5">%</option>
            </select>
            <input type="text" id="number2" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57) event.returnValue=false" onchange="get_sum()">
            <span>=</span>
            <input type="text" id="result">
            <br><br>
            <input type="button" id="bt_result" value="计算" onclick="get_sum()">
        </form>
    </center>
    <script> 
        function get_sum(){
            var num1 = Number(document.getElementById("number1").value)
            var num2 = Number(document.getElementById("number2").value)
            var oper = document.getElementById("operator").value
            var item = 0
            switch(oper){
                case "1":
                    item = (num1+num2).toFixed(3);
                    document.getElementById("result").value=item;
                    break;
                case "2":
                    item = (num1-num2).toFixed(3);
                    document.getElementById("result").value=item;
                    break;
                case "3":
                    item = (num1*num2).toFixed(3);
                    document.getElementById("result").value=item;
                    break;
                case "4":
                    item = (num1/num2).toFixed(3);
                    document.getElementById("result").value=item;
                    break;
                case "5":
                    item = (num1%num2).toFixed(3);
                    document.getElementById("result").value=item;
                    break;
            }
        }
    </script>
</body>
</html>