用html，css，JavaScript实现简单计算器_html静态页面动态计算除了calc()还有别的吗-CSDN博客

本文链接：https://blog.csdn.net/DavenportChen/article/details/115285278

实现具有加法，减法，乘法功能的简单计算器：
代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>计算器</title>
    <script>
        function myck(type) {
            var inputNum1 = document.getElementById("num1");
            var inputNum2 = document.getElementById("num2");
            if(type==1){
                // 1.非空判断
                if(inputNum1.value==""){
                    alert("请先输入数字1");

                    return false;
                }
                if(inputNum2.value==""){
                    alert("请先输入数字2");
                    return false;
                }
                // 2.加法操作
                var total = parseInt(inputNum1.value) + parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果：<strong style='color: red;'>"+total+"</strong></h2>";
            }else if(type==2){
                // 1.非空判断
                if(inputNum1.value==""){
                    alert("请先输入数字1");
                    return false;
                }
                if(inputNum2.value==""){
                    alert("请先输入数字2");
                    return false;
                }
                // 2.减法操作
                var total = parseInt(inputNum1.value) - parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果：<strong style='color: red;'>"+total+"</strong></h2>";
            }else if(type==3){
                // 1.非空判断
                if(inputNum1.value==""){
                    alert("请先输入数字1");
                    return false;
                }
                if(inputNum2.value==""){
                    alert("请先输入数字2");
                    return false;
                }
                // 2.减法操作
                var total = parseInt(inputNum1.value) * parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>计算结果为：<strong style='color: red;'>"+total+"</strong></h2>";
            }else if(type==4){
                // 清空操作
                if(confirm("确认清空？")){
                    inputNum1.value = "";
                    inputNum2.value = "";
                    document.getElementById("resultDiv").innerHTML = "";
                }
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>计算器</h1>
    数字1：<input id="num1" type="number" placeholder="前输入数字1"> <p></p>
    数字2：<input id="num2" type="number"  placeholder="前输入数字2"> <p></p>
    <div>
        <input type="button" value=" 相 加" onclick="myck(1)">
        <input type="button" value=" 相 减 " onclick="myck(2)">
        <input type="button" value=" 相 乘" onclick="myck(3)">
        <input type="button" value=" 清 空 " onclick="myck(4)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">

    </div>
</div>

</body>
</html>