html+css+js实现计算器

森林之下
162 阅读1分钟

html文件名称为calculator.html；css文件名为calculator.css。html文件与css文件位于同一级目录下即可。代码还可以简化很多，过段时间再弄吧。

html文件

<!--
 * @Author: under_forest
 * @Date: 2022-04-19 11:51:25
 * @LastEditors: 请输入最后编辑人
 * @LastEditTime: 2022-04-23 15:41:36
 * @FilePath: \MyTest\计算器\calculator.html
 * @Description: 计算器
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>森林之下的计算器</title>
    <link rel="stylesheet" href="./calculator.css" />
    <script type="text/javascript">
      // 数字7
      function button_7() {
        // 获取按键上的值
        var button_7 = document.getElementById("button_7").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_7;
      }

      // 数字8
      function button_8() {
        // 获取按键上的值
        var button_8 = document.getElementById("button_8").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_8;
      }

      // 数字9
      function button_9() {
        // 获取按键上的值
        var button_9 = document.getElementById("button_9").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_9;
      }

      // 除号
      function button_divide() {
        // 获取按键上的值
        var button_divide = document.getElementById("button_divide").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = "";
        } else {
          /* 判断last_1是否为数字，
            如果是数字，就把符号拼接上去
            如果不是数字，保持结果框里的值不变 */
          if (isNaN(last_1)) {
            if (last_1 == ")") {
              document.getElementById("result").value = button_other_no + button_divide;
            } else {
              document.getElementById("result").value = button_other_no;
            }
          } else {
            document.getElementById("result").value = button_other_no + button_divide;
          }
        }
      }

      // 删除键
      function button_delete() {
        // 获取当前结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取去除最后一位字符的字符串，赋值给before_last_1
        var before_last_1 = button_other_no.substr(0, button_other_no.length - 1);
        // 将去除最后一位字符的字符串赋值给result结果框
        document.getElementById("result").value = before_last_1;
      }

      // 数字4
      function button_4() {
        // 获取按键上的值
        var button_4 = document.getElementById("button_4").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_4;
      }

      // 数字5
      function button_5() {
        // 获取按键上的值
        var button_5 = document.getElementById("button_5").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_5;
      }

      // 数字6
      function button_6() {
        // 获取按键上的值
        var button_6 = document.getElementById("button_6").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_6;
      }

      // 乘号
      function button_multiply() {
        // 获取按键上的值
        var button_multiply = document.getElementById("button_multiply").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = "";
        } else {
          /* 判断last_1是否为数字，
            如果是数字，就把符号拼接上去
            如果不是数字，保持结果框里的值不变 */
          if (isNaN(last_1)) {
            if (last_1 == ")") {
              document.getElementById("result").value = button_other_no + button_multiply;
            } else {
              document.getElementById("result").value = button_other_no;
            }
          } else {
            document.getElementById("result").value = button_other_no + button_multiply;
          }
        }
      }

      // 数字1
      function button_1() {
        // 获取按键上的值
        var button_1 = document.getElementById("button_1").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_1;
      }

      // 数字2
      function button_2() {
        // 获取按键上的值
        var button_2 = document.getElementById("button_2").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_2;
      }

      // 数字3
      function button_3() {
        // 获取按键上的值
        var button_3 = document.getElementById("button_3").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        document.getElementById("result").value = button_other + button_3;
      }

      // 减号
      function button_reduce() {
        // 获取按键上的值
        var button_reduce = document.getElementById("button_reduce").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = "";
        } else {
          /* 判断last_1是否为数字，
            如果是数字，就把符号拼接上去
            如果不是数字，保持结果框里的值不变 */
          if (isNaN(last_1)) {
            if (last_1 == ")") {
              document.getElementById("result").value = button_other_no + button_reduce;
            } else {
              document.getElementById("result").value = button_other_no;
            }
          } else {
            document.getElementById("result").value = button_other_no + button_reduce;
          }
        }
      }

      // 左括号
      function button_left() {
        // 获取按键上的值
        var button_left = document.getElementById("button_left").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = button_left;
        } else {
          if (last_1 == ")") {
            document.getElementById("result").value = button_other_no;
          } else {
            document.getElementById("result").value = button_other_no + button_left;
          }
        }
      }

      // 归零，不论有没有值，直接把结果设置为空
      function button_c() {
        document.getElementById("result").value = "";
      }

      // 数字0
      function button_0() {
        // 获取按键上的值
        var button_0 = document.getElementById("button_0").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = "";
        } else {
          document.getElementById("result").value = button_other_no + button_0;
        }
      }

      // 等于
      function button_equal() {
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        var value = isBracketBalance(button_other_no);
        if (value == 1) {
          /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，执行计算并将结果赋值给结果框 */
          if (button_other_no.length == 0) {
            document.getElementById("result").value = "";
          } else {
            /* 判断last_1是否为数字，
            如果是数字，就把符号拼接上去
            如果不是数字，保持结果框里的值不变 */
            if (isNaN(last_1)) {
              if (last_1 == ")") {
                try {
                  document.getElementById("result").value = window.eval(button_other_no);
                } catch (err) {
                  alert(
                    "\n兄台，你写的计算公式有问题啊！计算不了！\n\n自己改改或者点个归零吧！！！\n\n我不想写校验了！！！！！呜呜呜呜~~~~"
                  );
                }
              } else {
                document.getElementById("result").value = button_other_no;
                alert("\n兄台，你好好看看你写的计算公式能计算嘛！");
              }
            } else {
              try {
                document.getElementById("result").value = window.eval(button_other_no);
              } catch (err) {
                alert(
                  "\n兄台，你写的计算公式有问题啊！计算不了！\n\n自己改改或者点个归零吧！！！\n\n我不想写校验了！！！！！呜呜呜呜~~~~"
                );
              }
            }
          }
        }
      }

      // 加号
      function button_add() {
        // 获取按键上的值
        var button_add = document.getElementById("button_add").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = "";
        } else {
          /* 判断last_1是否为数字，
            如果是数字，就把符号拼接上去
            如果不是数字，保持结果框里的值不变 */
          if (isNaN(last_1)) {
            /*判断最后一位字符是否是右括号
             */
            if (last_1 == ")") {
              document.getElementById("result").value = button_other_no + button_add;
            } else {
              document.getElementById("result").value = button_other_no;
            }
          } else {
            document.getElementById("result").value = button_other_no + button_add;
          }
        }
      }

      // 右括号
      function button_right() {
        // 获取按键上的值
        var button_right = document.getElementById("button_right").innerText;
        // 获取结果框的值
        var button_other = document.getElementById("result").value;
        // 去除结果框里所有的空格，并把处理后的结果赋值给button_other_no
        var button_other_no = button_other.split(" ").join("");
        // 获取最后一位字符，赋值给last_1
        var last_1 = button_other_no.substr(button_other_no.length - 1, button_other_no.length);
        /* 判断处理后的字段长度，
          若为0，则表示框内没有字段，则将结果框清空
          若不为0，则表示框内有字段，将符号与原字段拼接在一起，并将结果赋值给结果框 */
        if (button_other_no.length == 0) {
          document.getElementById("result").value = button_other_no;
        } else {
          document.getElementById("result").value = button_other_no + button_right;
        }
      }

      //统计字符串中特定字符串的个数
      function getStrCount(scrstr, armstr) {
        //scrstr 源字符串 armstr 特殊字符

        var count = 0;
        while (scrstr.indexOf(armstr) >= 1) {
          undefined;
          scrstr = scrstr.replace(armstr, "");
          count++;
        }
        return count;
      }

      // isBracketBalance(str)函数是一个用于判断字符串中括号是否平衡匹配的函数
      // @prarmeter: str是将要被判断的字符串
      // 如果匹配返回true
      // 如果不匹配则返回false
      function isBracketBalance(str) {
        var leftBracketNum = 0, // 用于保存左括号个数的变量
          strLength = str.length; // 把字符串的长度付给一个变量增加程序的性能
        // 通过for循环来读取字符串中的一个一个的字符
        for (var i = 0; i < strLength; i++) {
          var temp = str.charAt(i); // 付给临时变量增加程序的性能
          if (temp === "(") {
            // 如果是左括号，则leftBracketNum++
            leftBracketNum++;
          }
          if (temp === ")") {
            // 如果是右括号，则leftBracketNum--
            leftBracketNum--;
          }
        }

        // 最后判断leftBracketNum，如果为0表示平衡否则不平衡
        if (leftBracketNum === 0) {
          return 1;
        } else {
          alert("括号不平衡！请修改！");
          return 0;
        }
      }
    </script>
  </head>

  <body>
    <table>
      <tr>
        <td colspan="5">
          <input readonly="readonly" type="text" name="result" id="result" />
        </td>
      </tr>
      <tr>
        <td><button id="button_7" class="anniu" onclick="button_7()">7</button></td>
        <td><button id="button_8" class="anniu" onclick="button_8()">8</button></td>
        <td><button id="button_9" class="anniu" onclick="button_9()">9</button></td>
        <td><button id="button_divide" class="anniu" onclick="button_divide()">/</button></td>
        <td rowspan="2">
          <button id="button_delete" class="anniu" onclick="button_delete()">删除</button>
        </td>
      </tr>
      <tr>
        <td><button id="button_4" class="anniu" onclick="button_4()">4</button></td>
        <td><button id="button_5" class="anniu" onclick="button_5()">5</button></td>
        <td><button id="button_6" class="anniu" onclick="button_6()">6</button></td>
        <td>
          <button id="button_multiply" class="anniu" onclick="button_multiply()">*</button>
        </td>
      </tr>
      <tr>
        <td><button id="button_1" class="anniu" onclick="button_1()">1</button></td>
        <td><button id="button_2" class="anniu" onclick="button_2()">2</button></td>
        <td><button id="button_3" class="anniu" onclick="button_3()">3</button></td>
        <td>
          <button id="button_reduce" class="anniu" onclick="button_reduce()">-</button>
        </td>
        <td><button id="button_left" class="anniu" onclick="button_left()">(</button></td>
      </tr>
      <tr>
        <td><button id="button_c" class="anniu" onclick="button_c()">归零</button></td>
        <td><button id="button_0" class="anniu" onclick="button_0()">0</button></td>
        <td><button id="button_equal" class="anniu" onclick="button_equal()">=</button></td>
        <td>
          <button id="button_add" class="anniu" onclick="button_add()">+</button>
        </td>
        <td><button id="button_right" class="anniu" onclick="button_right()">)</button></td>
      </tr>
    </table>
  </body>
</html>

css文件

table {
    border: 1px solid black;
    background-color: aqua;
    margin: 100px auto 0;
}

td {
    border: 1px solid black;
    text-align: center;
    width: 200px;
    height: 100px;
}

#result {
    width: 100%;
    height: 100%;
    background-color: aqua;
    border: none;
    font-size: 35px;
    color: red;
}

.anniu {
    width: 100%;
    height: 100%;
    background-color: aqua;
    border: none;
    font-size: 50px;
}

不错就点个赞吧！谢谢！

avatar
文章
阅读
粉丝