js는 간단한 계산기 기능을 구현합니다.
- 高洛峰원래의
- 2017-01-20 17:27:121101검색
더 이상 고민하지 말고 샘플 코드를 살펴보세요.
<!DOCTYPE html>
<html>
<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>
<div>
<p></p>
</div>
<div>
<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);">=</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와 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JSP 기반의 간단한 계산기를 구현하는 방법다음 기사：JSP 기반의 간단한 계산기를 구현하는 방법