js原生计算器

低等级的

已于 2023-04-27 15:17:02 修改

阅读量41

点赞数

文章标签： javascript css 前端 html

于 2023-04-27 15:15:09 首次发布

本文链接：https://blog.csdn.net/qq_46041954/article/details/130407230

版权

计算器这玩意挺简单的，仅作参考

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 600px;
      background-color: rgb(12, 60, 52);
      border-radius: 10px;
      position: absolute;
      left: calc(50% - 250px);
      top: 100px;
    }

    .topBox {
      width: 480px;
      height: 80px;
      background-color: rgb(221, 244, 203);
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 3px;
      font-size: 40px;
      text-align: right;
    }

    .num {
      width: 80px;
      height: 80px;
      background-color: rgb(71, 182, 52);
      margin-left: 20px;
      margin-top: 20px;
      float: left;
      font-size: 60px;
      text-align: center;
      line-height: 80px;
      border-radius: 5px;
      font-weight: 600;
    }

    .ysnum1 {
      width: 100px;
      height: 140px;
    }

    .ysnum2 {
      width: 180px;
    }

    .leftBox {
      width: 300px;
      position: absolute;
      left: 20px;
      top: 180px;
    }

    .ac {
      position: absolute;
      top: 80px;
      width: 180px;
      left: 20px;
    }

    .dy {
      position: absolute;
      left: 220px;
      top: 80px;
    }

    .rightBox {
      width: 100px;
      position: absolute;
      right: 50px;
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="topBox"></button>

    <button class="num ac">AC</button>
    <button class="num dy">=</button>
    <div class="leftBox">
      <button class="num" value="9">9</button>
      <button class="num" value="8">8</button>
      <button class="num" value="7">7</button>
      <button class="num" value="6">6</button>
      <button class="num" value="5">5</button>
      <button class="num" value="4">4</button>
      <button class="num" value="3">3</button>
      <button class="num" value="2">2</button>
      <button class="num" value="1">1</button>
      <button class="num" value="0">0</button>
      <button class="num ysnum2" value="/">/</button>
    </div>
    <div class="rightBox">
      <button class="num ysnum1" value="+">+</button>
      <button class="num ysnum1" value="-">-</button>
      <button class="num ysnum1" value="*">x</button>
    </div>
  </div>

  <script>
    oTop = document.querySelector(".topBox");
    oAc = document.querySelector(".ac");
    oDy = document.querySelector(".dy");
    oNums1 = document.querySelectorAll(".leftBox .num");
    oNums2 = document.querySelectorAll(".rightBox .num");

    var frontnum = 0;
    var laternum = 0;
    var fh = "";
    var res = 0;
    var flag = false;

    //获取第一次输入的值
    for (var i = 0; i < oNums1.length - 1; i++) {
      oNums1[i].onclick = function () {
        if (flag) {
          oTop.innerHTML = "";
          oTop.innerHTML = this.value;
          flag = false;
        } else {
          res = oTop.innerHTML += this.value;
        }
      }
    }

    //除法
    oNums1[oNums1.length - 1].onclick = function () {
      if (frontnum == 0) {
        frontnum = Number(oTop.innerHTML);
        fh = this.value;
        oTop.innerHTML = "";
      } else {
        return;
      }
    }

    //加法  减法   乘法
    for (var j = 0; j < oNums2.length; j++) {
      oNums2[j].onclick = function () {
        if (frontnum == 0) {
          frontnum = Number(oTop.innerHTML);
          fh = this.value;
          oTop.innerHTML = "";
        } else {
          return;
        }
      }
    }

    //按下等于符号，获取第二次输入的值并进行运算，输出值
    oDy.onclick = function () {
      laternum = Number(oTop.innerHTML);
      if (fh == "+") {
        res = frontnum + laternum;
      } else if (fh == "-") {
        res = frontnum - laternum;
      } else if (fh == "*") {
        res = frontnum * laternum;
      } else if (fh == "/") {
        res = frontnum / laternum;
      }
      //运算完成
      flag = true;
      oTop.innerHTML = res;
      frontnum = laternum = 0;
      fh = "";
    }

    //清零
    oAc.onclick = function () {
      flag = false;
      oTop.innerHTML = "";
      frontnum = laternum = 0;
      fh = "";
    }

  </script>
</body>

</html>