js实现一个简单的计算器

Demo戳这里

11月27日更新

使用 switch 语句代替 if 语句，使逻辑更清晰,代码更新部分如下：

 //switch语句
      switch (values) {
        case "Ans":

          break;
        case "=":
            rel = eval(txt.join(""));
            prt.value = rel;
            txt = [];
            txt.push(rel);
          break;
        case "AC":
            prt.value = [];
            txt = [];
          break;
        case "CE":
            txt.pop();
            prt.value = txt.join("");
          break;
        default:
          txt.push(values);
          prt.value = txt.join("");
        };

原文如下

功能1: 可以对两个数字进行加、减、乘、除的运算.
功能2: 可以使用清除按钮清空当前的所有输入内容.
功能3: 可以把多个运算连接起来操作, 直到按下等号键, 计算器输出正确的运算结果.

由于我对原生js有一种迷之热爱（微笑.jpg），所以没用JQuery。
css很简单，但是没仔细做，自适应也没写。

思路:

给每个按钮一个Value，然后js获取点击按钮value。新建一个空的数组，每次获取点击的value之后push进去，然后用arr.join("")转换为字符串，并赋值给input的value就可以显示了。这里有一点，input设置为readonly。

当value == "="时，用到eval()函数。

eval() 将一个JavaScript代码字符串求值成特定的对象。

这个函数难点在于AC和CE。AC是清除所有输入，很简单，直接另数组=[]。

CE的话可以用arr.pop(),该方法用于删除数组中最后一个元素。

总体js代码

var values;
var txt = [];
var prt = document.getElementById("prt");
var rel;
function getValues() {
  var btns = document.getElementsByTagName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
      values = this.value;
      if (values !=  "Ans") {
        if (values == "=") {
          rel = eval(txt.join(""));
          console.log(rel);
          prt.value = rel;
          txt = [];
          txt.push(rel);
        } else if (values == "AC") {
          prt.value = [];
          txt = [];
        } else if (values == "CE") {
          txt.pop();
          prt.value = txt.join("");
          } else {
            txt.push(values);
            prt.value = txt.join("");
          };
        };
        console.log(txt);
      };
    };
  };
window.onload = getValues;