原生js和css混合实现的功能简单的计算器，适合初学者

最新推荐文章于 2024-07-22 15:13:59 发布

飞翔的荷兰人103

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量128

点赞数

分类专栏：原生js 文章标签： javascript

本文链接：https://blog.csdn.net/jhaglkl/article/details/105754368

版权

原生js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为比较简单就没加注释，如果有疑问欢迎下面留言。本人也是初学js，有问题大家可以一起讨论！

实现的功能也比较简单，只有加减乘除和清除，比较适合刚入原生js的小白练习！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .con {
        width: 500px;
        height: 600px;
        border: 1px solid #000000;
        position: relative;
        margin: auto;
      }
      .show {
        width: 300px;
        height: 40px;
        border: 1px solid #000000;
        margin: auto;
        margin-top: 20px;
        line-height: 40px;
        text-align: right;
        padding: 5px;
      }
      .bn {
        width: 60px;
        height: 60px;
        padding: 20px;
        line-height: 60px;
        float: left;
        text-align: center;
        border: 1px solid #000000;
        margin-top: 25px;
        margin-left: 18px;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="show"></div>
      <div class="bn">1</div>
      <div class="bn">2</div>
      <div class="bn">3</div>
      <div class="bn">4</div>
      <div class="bn">5</div>
      <div class="bn">6</div>
      <div class="bn">7</div>
      <div class="bn">8</div>
      <div class="bn">9</div>
      <div class="bn">0</div>
      <div class="bn">+</div>
      <div class="bn">-</div>
      <div class="bn">*</div>
      <div class="bn">/</div>
      <div class="bn">C</div>
      <div class="bn">=</div>
    </div>
    <script>
      var show;
      var value1 = "";
      var value2 = "";
      var type = "";
      init();
      function init() {
        show = document.querySelector(".show");
        var con = document.querySelector(".con");
        con.addEventListener("click", clickHandler);
      }

      function clickHandler(e) {
        if (e.target.className !== "bn") return;
        if (isNaN(e.target.textContent)) {
          setType(e.target);
        } else {
          setValue(e.target);
        }
        show.textContent = value1 + (type === "" ? "" : type + value2);
      }

      function setValue(elem) {
        if (type === "") {
          value1 += elem.textContent;
          value1 = Number(value1);
        } else {
          value2 += elem.textContent;
          value2 = Number(value2);
        }
      }

      function setType(elem) {
        switch (elem.textContent) {
          case "+":
          case "-":
          case "*":
          case "/":
            type = elem.textContent;
            break;
          case "C":
            value1 = "";
            value2 = "";
            type = "";
            break;
          case "=":
            count();
            break;
        }
      }

      function count() {
        var sum = 0;
        switch (type) {
          case "+":
            sum = Number(value1) + Number(value2);
            break;
          case "-":
            sum = value1 - value2;
            break;
          case "*":
            sum = value1 * value2;
            break;
          case "/":
            sum = value1 / value2;
            break;
        }
        value1 = sum;
        value2="";
        type = "";
      }
    </script>
  </body>
</html>

还有喜欢前端技术的同学可以加QQ577873333，随时在线啊！！

飞翔的荷兰人103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js和css混合实现的功能简单的计算器，适合初学者

因为比较简单就没加注释，如果有疑问欢迎下面留言。本人也是初学js，有问题大家可以一起讨论！实现的功能也比较简单，只有加减乘除和清除，比较适合刚入原生js的小白练习！<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name=...
复制链接

扫一扫

专栏目录