js实现一个简单的计算器

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

11月27日更新

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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("");
};

原文如下

由于我对原生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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
努力<br><br>希望能成为一名前端工程师<br>加油