JS实现计算器
程序员文章站
2024-02-27 13:15:39
...
HTML部分代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.js_par {
width: 350px;
height: 500px;
margin: auto;
background: #D9E4F1;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
border: 1px solid silver;
}
table td {
width: 50px;
height: 50px;
}
.txt {
width: 99%;
height: 50px;
font-size: 1.5rem;
text-align: right;
border-style: none;
}
.reg {
width: 99%;
height: 25px;
font-size: 1.1rem;
text-align: right;
border-style: none;
}
button {
width: 100%;
height: 100%;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="js_par">
<table cellspacing="10">
<tr>
<td colspan="5">
<input type="text" class="reg" value="" disabled/>
<input class="txt" value="0" disabled type="text"/>
</td>
</tr>
<tr>
<td>
<button class="btn">DEL</button>
</td>
<td colspan="2">
<button class="btn">C</button>
</td>
<td>
<button class="btn">+/-</button>
</td>
<td>
<button class="btn">Sqrt</button>
</td>
</tr>
<tr>
<td>
<button class="btn">7</button>
</td>
<td>
<button class="btn">8</button>
</td>
<td>
<button class="btn">9</button>
</td>
<td>
<button class="btn">/</button>
</td>
<td>
<button class="btn">%</button>
</td>
</tr>
<tr>
<td>
<button class="btn">4</button>
</td>
<td>
<button class="btn">5</button>
</td>
<td>
<button class="btn">6</button>
</td>
<td>
<button class="btn">*</button>
</td>
<td>
<button class="btn">1/x</button>
</td>
</tr>
<tr>
<td>
<button class="btn">1</button>
</td>
<td>
<button class="btn">2</button>
</td>
<td>
<button class="btn">3</button>
</td>
<td>
<button class="btn">-</button>
</td>
<td rowspan="2">
<button class="btn">=</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn">0</button>
</td>
<td>
<button class="btn">.</button>
</td>
<td>
<button class="btn">+</button>
</td>
</tr>
</table>
</div>
</body>
</html>JS部分代码：
<script>
/*添加所有按钮事件*/
window.onload = function () {
var btn = document.getElementsByClassName("btn");
var txt = document.getElementsByClassName("txt")[0];
var reg = document.getElementsByClassName("reg")[0];
var arr = [];//记录用户的按键 最终构成表达式
var isactive = false;//用户按符号的状态
var isdeng = false;//在等号 处理覆盖值的关键变量
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
//点击数字和点的时候去屏幕上
if (!isNaN(this.innerHTML) || this.innerHTML == ".") {
if (txt.value == "0") {
if (this.innerHTML == ".") {
txt.value = "0" + this.innerHTML;
}
else {
txt.value = this.innerHTML;
}
}
else {
if (isdeng) {
txt.value = this.innerHTML;
isdeng = false;
isactive=false;
}
else {
if (!isactive) {
if (txt.value.indexOf(".") != -1 && this.innerHTML == ".") {
return;
}
txt.value += this.innerHTML;
}
else if (isactive) {
if (this.innerHTML == ".") {
txt.value = "0" + this.innerHTML;
}
else {
txt.value = this.innerHTML;
}
isactive = false;
}
}
}
}
else {
//剩下的符号
switch (this.innerHTML) {
case "DEL":
if (!isdeng)
txt.value = txt.value.length > 1 ? txt.value.substr(0, txt.value.length - 1) : "0";
break;
case "C":
arr = [];
txt.value = "0";
isactive = false;
isdeng = false;
break;
case "=":
//计算之后的答案
//把屏幕的值做最后一次追加
arr[arr.length] = txt.value;
//计算表达式的方法 eval
var res = eval(arr.join("")); // 转化成表达式 eval计算表达式
txt.value = res;
reg.value = "";
arr = []; //清空之前的计算结果
isdeng = true;//在等号之后处理+=按的数字 如果该为true 类似在上面按数字
break;
case "+/-":
txt.value *= -1;
break;
case "1/x":
txt.value = (1 / txt.value);
break;
case "Sqrt":
txt.value = Math.sqrt(txt.value);
break;
default :
method(this.innerHTML);
break;
}
function method(f) {
//连续按符号 在true之前处理
console.log(isactive);
if (isactive) {
arr[arr.length - 1] = f;
console.log("用户在连续按符号！");
}
else {
//存储当前用户输入的值和符号
arr[arr.length] = txt.value;
arr[arr.length] = f;
}
reg.value = arr.join(""); //转换成表达式
isactive = true;
}
}
}
}
}
</script>