利用js实现计算器

object not found

已于 2022-09-05 11:25:26 修改

阅读量2w

点赞数 2

于 2022-08-10 10:22:26 首次发布

本文链接：https://blog.csdn.net/qq_45547094/article/details/126261145

版权

javascript 同时被 3 个专栏收录

51 篇文章 1 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

思路：设置五行，第一行为输入框，剩下的四行每一行五个botton按钮，然后获取其value值做成一个数组，并注册点击事件里的this判断点击的是哪一个，然后进行相应的运算

效果图

代码如下

html

<!-- 计算器的外壳 -->
    <div class="outer_box">
      <!-- 标题 -->
      <h1>计算器</h1>
      <!-- 线 -->
      <hr />
      <!-- 结果框 -->
      <div class="result">
        <!-- disabled="disabled 禁止修改计算结果 -->
        <input type="text" class="input_box" value="" />
      </div>
      <!--onclick="inputEvent(this)" 给按钮添加点击事件  -->
      <!-- 数组盒子1 -->
      <div class="numerbox">
        <button onclick="inputEvent(this)" class="number number1">1</button>
        <button onclick="inputEvent(this)" class="number number2">2</button>
        <button onclick="inputEvent(this)" class="number number3">3</button>
        <button onclick="backNum()" class="number return">撤回</button>
        <button onclick="clearNum()" class="number delete">清除</button>
      </div>
      <!-- 数组盒子2 -->
      <div class="numerbox">
        <button onclick="inputEvent(this)" class="number number4">4</button>
        <button onclick="inputEvent(this)" class="number number5">5</button>
        <button onclick="inputEvent(this)" class="number number6">6</button>
        <button onclick="inputEvent(this)" class="number jiahao">+</button>
        <button onclick="inputEvent(this)" class="number jianhao">-</button>
      </div>
      <!-- 数组盒子3 -->
      <div class="numerbox">
        <button onclick="inputEvent(this)" class="number number7">7</button>
        <button onclick="inputEvent(this)" class="number number8">8</button>
        <button onclick="inputEvent(this)" class="number number9">9</button>
        <button onclick="inputEvent(this)" class="number chenghao">*</button>
        <button onclick="inputEvent(this)" class="number chuhao">/</button>
      </div>
      <!-- 数组盒子4 -->
      <div class="numerbox">
        <button onclick="inputEvent(this)" class="number">0</button>
        <button onclick="inputEvent(this)" class="number">00</button>
        <button onclick="inputEvent(this)" class="number dianhao">.</button>
        <button onclick="inputEvent(this)" class="number baifenhao">%</button>
        <button onclick="inputOper(this)" class="number dengyuhao">=</button>
      </div>
    </div>

css

    * {
        margin: 0;
        padding: 0;
      }

      .outer_box {
        border: rgb(0, 10, 9) 5px solid;
        margin: 50px auto;
        width: 700px;
        height: 610px;
        background-color: aqua;
        box-shadow: 3px 6px 0 #649cac, 6px 10px 20px #000;
        border-radius: 12px;
      }

      h1 {
        text-align: center;
        color: rgb(3, 0, 17);
      }

      hr {
        width: 698px;
        height: 5px;
        background-color: rgb(7, 2, 0);
      }

      .result {
        width: 620px;
        height: 50px;
        margin: 0px auto;
        margin-top: 20px;
        background-color: rgb(13, 170, 175);
        border-radius: 10px;
        border: rgb(7, 123, 255) 1px solid;
      }

      .input_box {
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        border-radius: 12px;
        font-size: 25px;
        padding-left: 5px;
        color: rgb(255, 255, 255);
        font-weight: 600;
      }

      .numerbox {
        display: flex;
      }

      .number {
        width: 90px;
        text-align: center;
        height: 80px;
        line-height: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 41px;
        margin-top: 30px;
        border-radius: 12px;
        box-shadow: 3px 6px 0 #649cac, 6px 10px 20px #000;
        font-size: 35px;
        border: none;
      }

      .number:hover {
        background-color: rgb(94, 248, 89);
      }

      .return {
        background-color: rgb(248, 234, 31);
        box-shadow: 3px 6px 0 rgb(155, 170, 17), 6px 10px 20px #000;
      }

      .return:hover {
        background-color: rgb(33, 211, 235);
      }

      .delete {
        background-color: rgb(255, 38, 0);
        box-shadow: 3px 6px 0 rgb(155, 61, 45), 6px 10px 20px #000;
      }

      .delete:hover {
        background-color: rgb(211, 236, 65);
      }

      .dengyuhao {
        background-color: rgb(36, 241, 9);
      }

      .dengyuhao:hover {
        background-color: rgb(248, 172, 244);
      }

      function onLoad() {
        //加载完毕后光标自动对应到输入框
        document.getElementById("input_box").focus();
      }
      //读取按钮的值，传给输入框
      // inputEvent 问老师加一
      function inputEvent(btn) {
        //把val的值改为每个事件的innerHTML值
        var val = btn.innerHTML;
        //获取input标签
        var xsval = document.querySelector(".input_box");
        //标签里的value连接每个事件的innerHTML值
        xsval.value += val;
        // xsval.value = val + xsval.value;
      }
      //计算出结果
      function inputOper() {
        var xsval = document.querySelector(".input_box");
        // eval 问老师加二   value结果框中的值
        xsval.value = eval(document.querySelector(".input_box").value);
      }
      //清零
      // onclick="backNum()"；clearNum；问老师加三
      function clearNum() {
        var xsval = document.querySelector(".input_box");
        xsval.value = "";
        document.querySelector(".input_box").focus();
      }
      //退格
      function backNum() {
        var arr = document.querySelector(".input_box");
        arr.value = arr.value.substring(0, arr.value.length - 1);
      }

csdn文章推荐受影响测试文字行数大于10字数大于10的解决方法