简易版计算机

最新推荐文章于 2022-09-05 17:18:41 发布

BloggerM

最新推荐文章于 2022-09-05 17:18:41 发布

阅读量370

点赞数

分类专栏：前端案例文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/123577977

版权

前端案例专栏收录该内容

5 篇文章

订阅专栏

简易版计算机的实现

案例视图：

在这里插入图片描述

案例实现：

第一种方式

核心：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>