纯js制作加减乘除计算器

作者: 吃盖浇饭 | 来源:发表于2018-08-10 18:46 被阅读23次

纯js制作加减乘除计算器
JavaScript制作简单计算器
封装一个计算器函数
js制作简易计算器
GO语言初级学习之代码案例06 （面向对象）
JavaScript--事件编程
提升JS质量—1. JS的Numbers
js制作简单的计算器
linux-基本常用命令
专题一：GRE数学考试当中你需要注意的

简易计算机效果图

工作之余，想写个计算器玩玩，搜了一下网上的，发现都很复杂，一个简单的功能引入好多插件，本人不才，自己整了一个，纯js写的。
先上一个写好的代码，看的话，直接新建一个txt文本，后缀改成html就行
文件名例如 1.html就行，然后用浏览器打开直接看效果就行。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>纯js制作计算器</title>
</head>
<style media="screen">
  * {
    margin: 0;
    padding: 0;
  }

  .count ul {
    list-style: none;
    width: 400px;
    height: 400px;
    background: red;
  }

  .count ul li {
    list-style: none;
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
    text-align: center;
    line-height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
  }

  .isBig {
    width: 400px;
    height: 40px;
    font-size: 30px;
    color: red;
  }
</style>

<body>
  <div class="count">
    <input type="text" name="" value="" class="isBig">
    <ul>
      <li onclick="isFun(this)">1</li>
      <li onclick="isFun(this)">2</li>
      <li onclick="isFun(this)">3</li>
      <li onclick="isFun(this)">+</li>
      <li onclick="isFun(this)">4</li>
      <li onclick="isFun(this)">5</li>
      <li onclick="isFun(this)">6</li>
      <li onclick="isFun(this)">-</li>
      <li onclick="isFun(this)">7</li>
      <li onclick="isFun(this)">8</li>
      <li onclick="isFun(this)">9</li>
      <li onclick="isFun(this)">*</li>
      <li onclick="isFun(this)">0</li>
      <li onclick="isFun(this)">/</li>
      <li onclick="isFun(this)">清0</li>
      <li onclick="isFun(this)">=</li>
    </ul>
  </div>
  <script type="text/javascript">
    var str = 0;
    var strm = [];
    var isnext = 0;
    var isValue = document.getElementsByClassName('isBig')[0];
    function isFun(en) {
      var e = en.innerHTML;
      if (e == "清0") {
        isValue.value = "";
        str = 0;
        strm = [];
        isnext = 0;
        return;
      }
      if (e != "+" && e != "=" && e != "-" && e != "*" && e != "/") {
        str = Number(str + e)
        strm[isnext] = str;
        isValue.value = strm.join("");
      } else if (e != "=") {
        str = 0;
        isnext++;
        strm[isnext] = e;
        isnext++;
        isValue.value = strm.join("");
      }
      if (e == "=") {
        var num = 0;
        console.log(strm.join(""));
        num = eval(strm.join(""));
        isValue.value = num;
        str = num;
        strm = [num];
        isnext = 0;
      }
    }
  </script>

</body>

</html>

这个其实想法主要用到了eval这个方法，js自带的算法功能，我在做之前就在想，要想做，先将把数字单独拉出来，然后加减乘除单独拉出来算，最后拉出等号，这样只要思路想通了，后面就简单了。