js实现简单的计算器功能
程序员文章站
2023-11-03 10:15:46
话不多说，请看示例代码：
话不多说，请看示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>简单的计算器</title>
<style>
* {
margin: 0 auto;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.wrap {
width: 30%;
min-width: 250px;
margin: 0 auto;
border: 1px solid #b1b1b1;
}
.wrap .screen {
width: 100%;
height: 150px;
background-color: #8d8d8d;
}
.wrap .screen .string {
height: 100%;
user-select: none;
font-size: 30px;
word-break: break-all;
}
.wrap .button-group {
width: 100%;
margin-top: 5px;
}
.wrap .button-group td {
width: 25%;
}
.wrap .button-group td a {
display: inline-block;
height: 80px;
text-align: center;
background-color: #d5d5d5;
color: #000;
line-height: 80px;
font-size: 25px;
width: 100%;
user-select: none;
}
.wrap .button-group td a:hover {
background-color: #9d9d9d;
color: #002a80;
}
.wrap .button-group td a.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="screen">
<p class="string"></p>
</div>
<div class="button-group">
<table cellspacing="5" cellpadding="10" border="0" width="100%">
<tr>
<td><a href="javascript:void(0);">7</a></td>
<td><a href="javascript:void(0);">8</a></td>
<td><a href="javascript:void(0);">9</a></td>
<td><a href="javascript:void(0);">*</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">4</a></td>
<td><a href="javascript:void(0);">5</a></td>
<td><a href="javascript:void(0);">6</a></td>
<td><a href="javascript:void(0);">/</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">1</a></td>
<td><a href="javascript:void(0);">2</a></td>
<td><a href="javascript:void(0);">3</a></td>
<td><a href="javascript:void(0);">+</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">del</a></td>
<td><a href="javascript:void(0);">0</a></td>
<td><a href="javascript:void(0);" class="active">=</a></td>
<td><a href="javascript:void(0);">-</a></td>
</tr>
</table>
</div>
</div>
<script>
var numstring = document.getelementsbyclassname("string")[0];
var buttongroup = document.getelementsbytagname("a");
var screen = document.getelementsbyclassname("string")[0];
var num1 = 0;
var num2 = 0;
var count = 0;
var f;
var flag = true;
/*控制输入的是数字*/
var flag2 = true;
/*控制是否连续点击符号*/
screen.onclick = function () {
numstring.innerhtml = "";
};
for (var i = 0; i < buttongroup.length; i++) {
buttongroup[i].onclick = function () {
switch (this.innerhtml) {
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (!flag) {
numstring.innerhtml = "";
flag2 = true;
}
flag = true;
numstring.innerhtml += this.innerhtml;
break;
case "del":
numstring.innerhtml = numstring.innerhtml.substr(0, numstring.innerhtml.length - 1);
break;
case "+":
case "-":
case "*":
case "/":
f = this.innerhtml;
count++;
if (flag2) {
flag = false;
/*控制输入的是符号*/
if (count == 1) {
num1 = numstring.innerhtml;
} else {
flag2 = false;
num2 = numstring.innerhtml;
numstring.innerhtml = eval(num1 + f + num2);
num1 = numstring.innerhtml;
}
}
break;
case "=":
num2 = numstring.innerhtml;
numstring.innerhtml = eval(num1 + f + num2);
count = 0;
flag = !flag;
break;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！