JavaScript简单计算器效果

最新推荐文章于 2025-04-28 09:37:33 发布

转载最新推荐文章于 2025-04-28 09:37:33 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mpf/blog/526860

本文介绍了一个简单的网页计算器实现方法，使用HTML进行页面布局，通过JavaScript完成基本的加减乘除运算。该计算器能够验证输入是否为有效数字，并在不合法时给出提示。

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

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单计算器效果</title>
</head>
<body>
  <form name="myForm">
    数字1：<input type="text" name="num1" />
    <br>
    数字2：<input type="text" name="num2" />
    <br>
    结 果：<input type="text" name="res"/>
  </form>
  <br>
  <button onclick="Calculation('+')">+</button>
  <button onclick="Calculation('-')">-</button>
  <button onclick="Calculation('*')">*</button>
  <button onclick="Calculation('/')">/</button>
  <script type="text/javascript">
      function Calculation(e){
        var num1 = document.myForm.num1.value;
        var num2 = document.myForm.num2.value;
        var res = null;
        // 转换为数字，并验证合法性
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        if(isNaN(num1)){
          alert('数字1不合法，请填写为数字');
          return false;
        }
        if(isNaN(num2)){
          alert('数字2不合法，请填写为数字');
          return false;
        }

        // 计算结果
        switch(e){
          case '+':
            res = num1 + '+' + num2 + "=" + (num1 + num2);
            break;
          case '-':
            res = num1 + '-' + num2 + "=" + (num1 - num2);
            break;
          case '*':
            res = num1 + '*' + num2 + "=" + (num1 * num2);
            break;
          case '/':
            if(num2 == 0){
              alert('数字2不能为零');
              return false;
            }
            res = num1 + '/' + num2 + "=" + (num1 / num2);
            break;
        }

        // 将结果写入结果框内
        document.myForm.res.value = res;
      }
  </script>
</body>
</html>

转载于:https://my.oschina.net/mpf/blog/526860