Posted in Javascript onJanuary 16, 2017
话不多说，请看示例代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！
js实现简单的计算器功能
- Author -
15871483684声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@