js代码借助函数eval制作简易计算器

Posted 2020-11-27 shenyunfeng123

之前我们实现一些简易的计算器功能，是通过判断运算符来实现简单的一元运算，但是eval这个函数可以将包含数字和运算符的字符串进行计算，得出运算结果。

1.先写html+css代码，做出一个计算器样子。

CSS样式代码：

<style>//计算器样式
      table {
        border-collapse: collapse;
        font-size: 20px;
        margin: 50px auto;
      }
      td {
        text-align: center;
        width: 60px;
        height: 40px;
        border: 2px solid #cccccc;
        background-color: rgb(50, 126, 241);
      }
      input {
        border: none;
        outline: none;
        background-color: white;
        height: 30px;
        width: 240px;
      }
      table tr:nth-child(1) {
        height: 40px;
      }
      td:hover {
        opacity: 0.7;
        cursor: pointer;
      }
      tr:nth-child(1) td:hover {
        opacity: 1;
      }
    </style>

HTML代码：

<table>
      <caption>
        傻瓜式计算器
      </caption>
      <tr>
        <td colspan="4"><input type="text" disabled /></td>//第一个tr里面放置input元素，并且禁止写入
      </tr>
      <tr>
        <td colspan="2" class="clear">清空</td>
        <td colspan="2" class="del">退格</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>+</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>*</td>
      </tr>
      <tr>
        <td>0</td>
        <td>.</td>
        <td class="equal">=</td>
        <td>/</td>
      </tr>
    </table>

这里特意将清空、退格、和等于这几个添加了class类，是因为这几个按键是需要区别对待的，不属于输入数字和运算符的范围。

 

2.接下来就是script代码，大致思路就是获取td的一个伪数组，然后给每一个添加事件侦听，通过事件侦听来执行相应的代码

1）通过获取点击的td的class的属性值来判断，如果没有class类，e.tatget.getAttribute("class")的值就是undefined，判断为false，此时就是数字，小数点和运算符等被点击

2）获取的e.tatget.getAttribute("class")是"clear"的话，代表清空input，令input.value="";

3）获取的e.tatget.getAttribute("del")是"clear"的话，代表退格input，则将input.value的值从头复制到倒数第二个为止，重新赋给input.value;

4）获取的e.tatget.getAttribute("del")是"equal"的话，代表计算input，将input.value字符串进行计算，返回计算结果给input.value进行显示。

<script>
      var input = document.querySelector("input");//显示框
      var clear = document.querySelector(".clear");//清空
      var del = document.querySelector(".del");//退格
      var equal = document.querySelector(".equal");//等于
      var tds = document.querySelectorAll("td");//获取td元素的伪数组
      init();
      function init() {
        for (var i = 1; i < tds.length; i++) {//这里i从1开始，是因为第一个td不是按键，里面是input元素，因此要剔除
          tds[i].addEventListener("click", clickHandler);//给每个td添加一个事件侦听
        }
      }
      function clickHandler(e) {
        e.stopPropagation();//阻止冒泡
        if (!e.target.getAttribute("class")) {//当不具有class属性的td被点击时
          input.value += this.textContent;//this表示点击的那个td，this.textContext表示td里面的数字或运算符号
        } else if (e.target.getAttribute("class") === "clear") {//当清空键被点击时，让显示框显示为空
          input.value = "";
        } else if (e.target.getAttribute("class") === "del") {//当退格键被点击时，先将显示框里的字符串赋给str，再取str的0-倒数第二位复制，再赋给input.value显示
          var str = input.value;
          input.value = str.slice(0, str.length - 1);
        } else if (e.target.getAttribute("class") === "equal") {//当等于键被点击时，将字符串给eval函数进行计算，结果再赋给input.value进行显示。
          input.value = eval(input.value);
        }
      }
    </script>