简易版计算机

最新推荐文章于 2023-03-02 16:58:55 发布

原创最新推荐文章于 2023-03-02 16:58:55 发布 · 386 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

前端案例专栏收录该内容

5 篇文章

订阅专栏

本文对比了两种实现简易计算器的方法，一是利用if...elseif...if语句，二是借助switch语句，详细展示了如何通过HTML、CSS和JavaScript在网页上进行基本算术运算的动态计算。

简易版计算机的实现

案例视图：

在这里插入图片描述

案例实现：

第一种方式

核心：if … else if … if 语句

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        text-align: center;
        margin: 100px auto;
      }
      .input {
        width: 100px;
        height: 30px;
        background: #a1a1a1;
        outline: none;
        border: 0;
        font-size: 16px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="number" id="num1" class="input" />
      <select name="" id="sy" class="input">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="number" id="num2" class="input" />
      <input type="button" id="btn" value="=" class="input" />
      <input type="number" id="result" class="input" />
    </div>
  </body>
  <script>
    // 获取文本框的DOM对象
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    // 获取运算符的DOM对象
    var sy = document.getElementById("sy");
    // 获取按钮的DOM对象
    var btn = document.getElementById("btn");
    var result = document.getElementById("result");
    btn.onclick = function () {
      // 获取输入的数字 *1 将字符串转换为 number
      var num1Value = num1.value * 1;
      var num2Value = num2.value * 1;
      // 获取符号
      var syValue = sy.value;
      // 判断运算符
      if (syValue == "+") {
        result.value = num1Value + num2Value;
      } else if (syValue == "-") {
        result.value = num1Value - num2Value;
      } else if (syValue == "*") {
        result.value = num1Value * num2Value;
      } else if (syValue == "/") {
        result.value = num1Value / num2Value;
      }
    };
  </script>
</html>

第二种方式

核心：switch 语句

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        text-align: center;
        margin: 100px auto;
      }
      .input {
        width: 100px;
        height: 30px;
        background: #a1a1a1;
        outline: none;
        border: 0;
        font-size: 16px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="number" id="num1" class="input" />
      <select name="" id="sy" class="input">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="number" id="num2" class="input" />
      <input type="button" id="btn" value="=" class="input" />
      <input type="number" id="result" class="input" />
    </div>
  </body>
  <script>
    // 获取文本框的DOM对象
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    // 获取运算符的DOM对象
    var sy = document.getElementById("sy");
    // 获取按钮的DOM对象
    var btn = document.getElementById("btn");
    var result = document.getElementById("result");
    btn.onclick = function () {
      // 获取输入的数字 *1 将字符串转换为 number
      var num1Value = num1.value * 1;
      var num2Value = num2.value * 1;
      // 获取符号
      var syValue = sy.value;
      // switch 会出现case穿透 通过break结束判断
      // default 所有判断都不满足 才执行
      switch (syValue) {
        case "+":
          result.value = num1Value + num2Value;
          break;
        case "-":
          result.value = num1Value - num2Value;
          break;
        case "*":
          result.value = num1Value * num2Value;
          break;
        case "/":
          result.value = num1Value / num2Value;
          break;
        default:
          alert("运算符有误");
          break;
      }
    };
  </script>
</html>