手写一个简易计算器好久之前写的一个计算器了,这一波决定来充数,发个小小博客,使用html,css,js进行编写,完成了预

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算器</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .main {
        margin: 0 auto;
        width: 100vw;
        height: 177.9vw;
        background-image: linear-gradient(20deg, #a1c4fd 0%, #c2e9fb 100%);
      }
      .main .top {
        width: 100vw;
        height: 52.8vw;
        background-color: #efefef;
        border-bottom: 1px solid #a6a6a6;
      }
      .main .top input {
        border: none;
        width: 97vw;
        height: 50vw;
        background-color: #efefef;
        font-size: 8vw;
        outline: none;
      }
      .main .bottom {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .main .bottom button {
        flex: 25%;
        height: 25vw;
        border: none;
        border-bottom: 1px solid #a1c4fd;
        border-right: 1px solid #a1c4fd;
        font-size: 4.8vw;
      }
      .main .bottom button:nth-child(4n) {
        border-right: none;
      }
      .main .bottom button:nth-child(16) {
        height: 50vw;
      }
      .main .bottom .box {
        width: 75vw;
        height: 25vw;
        background-color: pink;
        margin-top: -25vw;
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="top">
        <input type="text" value="" dir="rtl" />
      </div>
      <div class="bottom">
        <button data-type="delete">C</button>
        <button data-type="caozuo">/</button>
        <button data-type="caozuo">X</button>
        <button data-type="shanchu">删除</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button data-type="caozuo">-</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button data-type="caozuo">+</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button data-type="=">=</button>
        <div class="box">
          <button>%</button>
          <button>0</button>
          <button>.</button>
        </div>
      </div>
    </div>
    <script>
      var btn = document.querySelector(".bottom");
      var input = document.querySelector("input");
      var btns = btn.querySelectorAll("button");

      // 输入框内容变化时的处理函数
      input.oninput = function () {
        alert("谁让你在我的输入框里面乱输东西的，你还无法无天了");
        input.value = "";
        newnum = "";
        oldnum = "";
        sign = "";
      };

      let newnum = "",
        oldnum = "",
        sign = "";

      // 循环为按钮添加点击事件监听
      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
          // 清除所有按钮的背景色
          for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "";
          }
          this.style.backgroundColor = "#fff"; // 设置点击按钮的背景色为白色
          var boo = this;
          setTimeout(() => {
            boo.style.backgroundColor = "";
          }, 100); // 100毫秒后恢复按钮的背景色
        });
      }

      // 错误操作处理函数
      function cuowucaozuo() {
        if (newnum == "" || oldnum == "" || sign == "") {
          input.value = "";
        }
      }

      // 按钮点击事件处理
      btn.addEventListener("click", function (e) {
        const type = e.target.dataset.type;
        const text = e.target.textContent;
        if (type === "=") {
          dnegyu(); // 等号按钮点击处理函数
        } else if (type === "caozuo") {
          jiajian(text); // 运算符按钮点击处理函数
          cuowucaozuo();
        } else if (type === "delete") {
          shanchuyi(); // 删除按钮点击处理函数
        } else if (type === "shanchu") {
          qingchu(); // 清除按钮点击处理函数
          cuowucaozuo();
        } else {
          shuzi(text); // 数字按钮点击处理函数
        }
      });

      // 数字按钮点击处理函数
      function shuzi(text) {
        newnum += text;
        input.value = newnum;
        if (input.value.length === 20) {
          alert("这已经是我的最大极限了，我实在是算不了你要的这个结果");
        } else if (input.value.length > 20) {
          alert("真就当我没有脾气呢");
        }
        if (text == "%") {
          alert("目前百分号还不可用，请您见谅");
          input.value = "";
          newnum = "";
          oldnum = "";
          sign = "";
        }
      }

      // 运算符按钮点击处理函数
      function jiajian(type) {
        sign = type;
        input.value += sign;
        oldnum = newnum;
        newnum = "";
        input.value = newnum + sign + oldnum;
      }

      // 等号按钮点击处理函数
      function dnegyu() {
        if (input.value == "") {
          alert("你家得计算器不输入点内容，就能得出结果啊");
        }
        if (isNaN(input.value)) {
          alert("大傻子别点了，你家计算器是这样用的啊");
          input.value = "";
          newnum = "";
          oldnum = "";
          sign = "";
        } else if (newnum == 0 && sign == "/") {
          alert("不是啊，你家计算器零能当被除数啊");
          input.value = "";
          newnum = "";
          oldnum = "";
          sign = "";
        }

        let result = 0;
        switch (sign) {
          case "+":
            result = parseFloat(oldnum) + parseFloat(newnum);
            break;
          case "-":
            result = parseFloat(oldnum) - parseFloat(newnum);
            break;
          case "X":
            result = parseFloat(oldnum) * parseFloat(newnum);
            break;
          case "/":
            result = parseFloat(oldnum) / parseFloat(newnum);
            break;
          default:
            return;
        }

        input.value = result.toFixed(2);
        newnum = result;
      }

      // 清除按钮点击处理函数
      function qingchu() {
        input.value = "";
        newnum = "";
        oldnum = "";
        sign = "";
      }

      // 删除按钮点击处理函数
      function shanchuyi() {
        if (input.value != "") {
          input.value = input.value.substring(0, input.value.length - 1);
          newnum = parseInt(input.value);
        } else {
          alert("拜托，你这个计算区域都没有内容，你让我怎么退格删除啊");
          input.value = "";
        }
      }
    </script>
  </body>
</html>