js实现简单的计算器功能

话不多说，请看示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单的计算器</title>
  <style>
    * {
      margin: 0 auto;
      padding: 0px;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    a {
      text-decoration: none;
    }
    .wrap {
      width: 30%;
      min-width: 250px;
      margin: 0 auto;
      border: 1px solid #b1b1b1;
    }
    .wrap .screen {
      width: 100%;
      height: 150px;
      background-color: #8d8d8d;
    }
    .wrap .screen .string {
      height: 100%;
      user-select: none;
      font-size: 30px;
      word-break: break-all;
    }
    .wrap .button-group {
      width: 100%;
      margin-top: 5px;
    }
    .wrap .button-group td {
      width: 25%;
    }
    .wrap .button-group td a {
      display: inline-block;
      height: 80px;
      text-align: center;
      background-color: #d5d5d5;
      color: #000;
      line-height: 80px;
      font-size: 25px;
      width: 100%;
      user-select: none;
    }
    .wrap .button-group td a:hover {
      background-color: #9d9d9d;
      color: #002a80;
    }
    .wrap .button-group td a.active {
      background-color: red;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="screen">
    <p class="string"></p>
  </div>
  <div class="button-group">
    <table cellspacing="5" cellpadding="10" border="0" width="100%">
      <tr>
        <td><a href="javascript:void(0);">7</a></td>
        <td><a href="javascript:void(0);">8</a></td>
        <td><a href="javascript:void(0);">9</a></td>
        <td><a href="javascript:void(0);">*</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">4</a></td>
        <td><a href="javascript:void(0);">5</a></td>
        <td><a href="javascript:void(0);">6</a></td>
        <td><a href="javascript:void(0);">/</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">1</a></td>
        <td><a href="javascript:void(0);">2</a></td>
        <td><a href="javascript:void(0);">3</a></td>
        <td><a href="javascript:void(0);">+</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">DEL</a></td>
        <td><a href="javascript:void(0);">0</a></td>
        <td><a href="javascript:void(0);" class="active">=</a></td>
        <td><a href="javascript:void(0);">-</a></td>
      </tr>
    </table>
  </div>
</div>
<script>
  var numString = document.getElementsByClassName("string")[0];
  var buttonGroup = document.getElementsByTagName("a");
  var screen = document.getElementsByClassName("string")[0];
  var num1 = 0;
  var num2 = 0;
  var count = 0;
  var f;
  var flag = true;
  /*控制输入的是数字*/
  var flag2 = true;
  /*控制是否连续点击符号*/
  screen.onclick = function () {
    numString.innerHTML = "";
  };
  for (var i = 0; i < buttonGroup.length; i++) {
    buttonGroup[i].onclick = function () {
      switch (this.innerHTML) {
        case "0":
        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
        case "8":
        case "9":
          if (!flag) {
            numString.innerHTML = "";
            flag2 = true;
          }
          flag = true;
            numString.innerHTML += this.innerHTML;
          break;
        case "DEL":
          numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
          break;
        case "+":
        case "-":
        case "*":
        case "/":
          f = this.innerHTML;
          count++;
          if (flag2) {
            flag = false;
            /*控制输入的是符号*/
            if (count == 1) {
              num1 = numString.innerHTML;
            } else {
              flag2 = false;
              num2 = numString.innerHTML;
              numString.innerHTML = eval(num1 + f + num2);
              num1 = numString.innerHTML;
            }
          }
          break;
        case "=":
          num2 = numString.innerHTML;
          numString.innerHTML = eval(num1 + f + num2);
          count = 0;
          flag = !flag;
          break;
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！