原生JS实现计算器

最新推荐文章于 2024-01-23 16:40:43 发布

原创最新推荐文章于 2024-01-23 16:40:43 发布 · 387 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #字符串 #html

本文介绍如何利用JavaScript实现一个基本的加减乘除计算器。通过纯手工编写代码，详细探讨了实现过程，并展示了最终的运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只能简单的实现加减乘除运算

###纯手工制作不容易，求一键三连，效果图如下：
在这里插入图片描述

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        background-color: red;
        height: 400px;
        width: 600px;
        position: absolute;
        top: calc(50% - 200px);
        left: calc(50% - 300px);
      }
      .header {
        height: 100px;
        background-color: #fcfdff;
        font-size: 32px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
      .content {
        height: 300px;
      }
      ul {
        height: 60px;
        background-color: white;
        display: flex;
      }
      .content > ul:first-child {
        color: red;
        background-color: #f9f9f9;
      }
      .content > ul:first-child > li:last-child {
        color: black !important;
      }
      .content > ul > li:last-child {
        color: red;
        background-color: #f9f9f9;
      }
      .color_red {
        color: red;
      }
      li {
        list-style: none;
        width: 150px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        cursor: pointer;
        border: 1px solid #ebebeb;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <p id="message">0</p>
      </div>
      <div class="content">
        <ul>
          <li>(</li>
          <li>)</li>
          <li>%</li>
          <li id="clear">C</li>
        </ul>
        <ul>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>/</li>
        </ul>
        <ul>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>*</li>
        </ul>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>-</li>
        </ul>
        <ul>
          <li>0</li>
          <li class="color_red">.</li>
          <li class="color_red" id="getResult">=</li>
          <li>+</li>
        </ul>
      </div>
    </div>
    <script>
      // 显示面板
      let result = document.getElementById("message");

      // 点击面板

      //获取所有的ul形成数组
      let uls = document.getElementsByTagName("ul");
      for (let i = 0; i < uls.length; i++) {
        //获取当前遍历ul的所有li，typeof ulBtn ===object
        let ulBtn = uls[i].children;
        //遍历伪数组ulBtn赋予点击事件
        for (let j = 0; j < ulBtn.length; j++) {
          ulBtn[j].onclick = function () {
            //判断面板中只有一个数字并且为0时候清屏并插入字符串
            if (result.innerHTML.length === 1 && result.innerHTML == "0") {
              result.innerHTML = "";
              result.innerHTML += this.innerHTML;
            } else {
              result.innerHTML += this.innerHTML;
            }
          };
        }
      }

      // 清屏
      let clear = document.getElementById("clear");
      clear.onclick = function () {
        //初始化值为0
        result.innerHTML = "0";
      };

      //获取结果
      let getResult = document.getElementById("getResult");
      getResult.onclick = function () {
        // ...扩展运算符展开面板的字符串
        // eval()将展开数值和运算符运算
        result.innerHTML = eval(...result.innerHTML);
      };
    </script>
  </body>
</html>