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;
|