js实现简单的计算器功能

2019-11-19 17:55:40

字体：大中小

来源：转载

供稿：网友

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

<!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>

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

上一篇：js实现弹窗暗层效果

下一篇：Javascript中document.referrer隐藏来源的方法