jsは簡単な計算機能を実装します-jsチュートリアル-php.cn

jsは簡単な計算機能を実装します

高洛峰

リリース： 2017-01-20 17:27:12

オリジナル

1158 人が閲覧しました

特に言うことはありませんが、サンプルコードをご覧ください:

<!DOCTYPE html>
<html>
<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>
  <div>
    <p></p>
  </div>
  <div>
    <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);">=</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>

ログイン後にコピー

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立つことを願っています。 PHP中国語ウェブサイトをサポートしてください!

簡単な電卓関数を実装する js に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。