JavaScript_03 超简计算器

版本一:

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script type="text/javascript">
        function add(){
            let num1 = document.getElementById("number1").value;
            let num2 = document.getElementById("number2").value;
            if(num1 == ""){
                alert("数字1不能为空");
                return;
            }
            if (isNaN(num1)){
                alert("数字1输入错误");
                return;
            }
            if(num2 == ""){
                alert("数字2不能为空");
                return;
            }
            if (isNaN(num2)){
                alert("数字2输入错误");
                return;
            }
            let num3 = parseInt(num1) + parseInt(num2);
            document.getElementById("result").value = num3;
        }
        function minus(){

            let num1 = document.getElementById("number1").value;
            let num2 = document.getElementById("number2").value;
            if(num1 == ""){
                alert("数字1不能为空");
                return;
            }
            if (isNaN(num1)){
                alert("数字1输入错误");
                return;
            }
            if(num2 == ""){
                alert("数字2不能为空");
                return;
            }
            if (isNaN(num2)){
                alert("数字2输入错误");
                return;
            }
            let num3 = parseInt(num1) - parseInt(num2);
            document.getElementById("result").value = num3;
        }
        function multiplication(){
            let num1 = document.getElementById("number1").value;
            let num2 = document.getElementById("number2").value;
            if(num1 == ""){
                alert("数字1不能为空");
                return;
            }
            if (isNaN(num1)){
                alert("数字1输入错误");
                return;
            }
            if(num2 == ""){
                alert("数字2不能为空");
                return;
            }
            if (isNaN(num2)){
                alert("数字2输入错误");
                return;
            }
            let num3 = parseInt(num1) * parseInt(num2);
            document.getElementById("result").value = num3;
        }
        function divide(){
            let num1 = document.getElementById("number1").value;
            let num2 = document.getElementById("number2").value;
            if(num1 == ""){
                alert("数字1不能为空");
                return;
            }
            if (isNaN(num1)){
                alert("数字1输入错误");
                return;
            }
            if(num2 == ""){
                alert("数字2不能为空");
                return;
            }
            if (isNaN(num2)){
                alert("数字2输入错误");
                return;
            }

            if (num2 == 0){
            alert("被除数不能为0")
            return;
          }
            let num3 = parseInt(num1) / parseInt(num2);
            document.getElementById("result").value = num3;

        }
        function remainder(){
            let num1 = document.getElementById("number1").value;
            let num2 = document.getElementById("number2").value;
            if(num1 == ""){
                alert("数字1不能为空");
                return;
            }
            if (isNaN(num1)){
                alert("数字1输入错误");
                return;
            }
            if(num2 == ""){
                alert("数字2不能为空");
                return;
            }
            if (isNaN(num2)){
                alert("数字2输入错误");
                return;
            }
            let num3 = parseInt(num1) % parseInt(num2);
            document.getElementById("result").value = num3;
        }
    </script>
</head>
<body>
数字1:<input type="text" id="number1"><br>
数字2:<input type="text" id="number2"><br>
<input type="button" value="加" id="add" onclick="add()">
<input type="button" value="减" id="minus" onclick="minus()">
<input type="button" value="乘" id="multiplication" onclick="multiplication()">
<input type="button" value="除" id="divide" onclick="divide()">
<input type="button" value="取余" id="remainder" onclick="remainder()"><br>
结果:<input type="text" id = "result">


</body>
</html>

结果演示:

版本二:

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <script type="text/javascript">
    function checkData(){
      let num1 = document.getElementById("number1").value;
      let num2 = document.getElementById("number2").value;
      if(num1 == ""){
        alert("数字1不能为空");
        return false;
      }
      if (isNaN(num1)){
        alert("数字1输入错误");
        return false;
      }
      if(num2 == ""){
        alert("数字2不能为空");
        return false;
      }
      if (isNaN(num2)){
        alert("数字2输入错误");
        return false;
      }
      return true;
    }

    function run(choose){
      if (!checkData()){return;}
      let num1 = parseInt(document.getElementById("number1").value);
      let num2 = parseInt(document.getElementById("number2").value);
      let num3;
      switch (choose){
        case '加':
          num3 = num1 + num2;
          break;
        case '减':
          num3 = num1 - num2;
          break;
        case '乘':
          num3 = num1 * num2;
          break;
        case '除':
            if (num2 == 0){
            alert("被除数不能为0")
            return;
          }
          num3 = num1 / num2;
          break;
        case '取余':
          num3 = num1 % num2;
          break;
      }
      document.getElementById("result").value = num3;
    }
  </script>
</head>
<body>
数字1:<input type="text" id="number1"><br>
数字2:<input type="text" id="number2"><br>
<input type="button" value="加" id="add" onclick="run('加')">
<input type="button" value="减" id="minus" onclick="run('减')">
<input type="button" value="乘" id="multiplication" onclick="run('乘')">
<input type="button" value="除" id="divide" onclick="run('除')">
<input type="button" value="取余" id="remainder" onclick="run('取余')"><br>
结果:<input type="text" id = "result">
</body>
</html>

效果同上