网页版简易计算器

最新推荐文章于 2025-02-22 01:00:00 发布

原创最新推荐文章于 2025-02-22 01:00:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#网页版简易计算器 #html、css、js

分享同时被 3 个专栏收录

56 篇文章

订阅专栏

Java基础

55 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

网页版简易计算器

所用知识：html、css、js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			input {
				width: 500px;
				height: 100px;
				font-size: 80px;
				background-color: aliceblue;
			}

			td {
				font-size: 40px;
				text-align: center;
			}

			td:hover {
				background-color: chartreuse;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<center>
			<input type="text" id="show" value="0" disabled="disabled" />
		</center>

		<table border="1" cellspacing="0" cellpadding="" width="500px" height="400px" align="center">
			<tr>
				<td id="guiling">C</td>
				<td width="30%" id="tuige">退格</td>
				<td class="ysf">%</td>
				<td class="ysf">/</td>
			</tr>
			<tr>
				<td class="nums">7</td>
				<td class="nums">8</td>
				<td class="nums">9</td>
				<td class="ysf">*</td>
			</tr>
			<tr>
				<td class="nums">4</td>
				<td class="nums">5</td>
				<td class="nums">6</td>
				<td class="ysf">-</td>
			</tr>
			<tr>
				<td class="nums">1</td>
				<td class="nums">2</td>
				<td class="nums">3</td>
				<td class="ysf">+</td>
			</tr>
			<tr>
				<td colspan="2" class="nums">0</td>
				<td class="nums">.</td>
				<td id="denghao">=</td>

			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var numValue1 = '';
		var numValue2 = '';
		var ysfValue = '';
		var flag = false;

		var show = document.getElementById("show");
		var tuige = document.getElementById("tuige");
		var guiling = document.getElementById("guiling");
		var denghao = document.getElementById("denghao");
		var nums = document.getElementsByClassName("nums");
		var ysfs = document.getElementsByClassName("ysf")
		for (var i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				if (flag) {
					numValue1 = '';
					numValue2 = '';
					ysfValue = '';
					flag = false;
				}
				var num = this.innerText;
				if ((num == '.') && (numValue1.indexOf('.') == -1)) {
					numValue1 += num;
					show.value = numValue1;
				} else if ((num == '0') && (numValue1.indexOf('.') != -1)) {
					numValue1 = show.value;
					numValue1 += num;
					show.value = numValue1;
				} else if (num != '.') {
					numValue1 += num;
					show.value = numValue1 * 1;
				}
			}
		}
		for (var i = 0; i < ysfs.length; i++) {
			ysfs[i].onclick = function() {
				if(show.value.substring(1).indexOf("+")!=-1||show.value.substring(1).indexOf("-")!=-1||show.value.substring(1).indexOf("*")!=-1||show.value.substring(1).indexOf("/")!=-1||show.value.substring(1).indexOf("%")!=-1&&this.innerText=='%'){
					return;
				}
				if (flag) {
					if(this.innerText=='%'){
						numValue1=numValue2;
						numValue2='';
					}
					flag = false;
				}
				if(numValue1==''){
					numValue1='0';
				}
				if (numValue2 == '') {
					if(this.innerText=='%'){
						numValue1 = numValue1/100;
					}
					numValue2 = numValue1;
					numValue1 = '';
					ysfValue = this.innerText;
					show.value += ysfValue;
				}else{
					if(this.innerText=='%'){
						numValue1 = numValue1/100;
					}else{
						yunsuan();
						numValue1 = '';
						ysfValue = this.innerText;
					}
					show.value += this.innerText;
				}
			}
		}
		denghao.onclick = function() {
			if(numValue1!=''&&numValue2!=''||ysfValue=='%'){
				yunsuan();
				flag = true;
			}
		}

		function yunsuan() {
			var num1 = Number(numValue2);
			var num2 = Number(numValue1);
			var r = '';
			numValue1 = '0';
			switch (ysfValue) {
				case '+':
					r = num1 + num2;
					break;
				case '-':
					r = num1 - num2;
					break;
				case '*':
					r = num1 * num2;
					numValue1 = '1';
					break;
				case '/':
					if (num2 != 0) {
						r = num1 / num2;
					} else {
						numValue1 = '';
						numValue2 = '';
						ysfValue = '';
						alert("除数不能为0！");
						r = '0';
					}
					numValue1 = '1';
					break;
				case '%':
					r = num1;
					break;
			}
			numValue2 = Number(r).toFixed(9) * 1;
			show.value = numValue2;
		}
		guiling.onclick = function() {
			numValue1 = '';
			numValue2 = '';
			ysfValue = '';
			show.value = '0';
		}
		tuige.onclick = function() {
			if(!flag){
				if(show.value.substring(1).indexOf("+")!=-1||show.value.substring(1).indexOf("-")!=-1||show.value.substring(1).indexOf("*")!=-1||show.value.substring(1).indexOf("/")!=-1||show.value.substring(1).indexOf("%")!=-1){
					numValue1 = numValue2;
					numValue2 = '';
					ysfValue='';
					show.value=numValue1;
				}else{
					if (numValue1.length > 1) {
						numValue1 = numValue1.substring(0, numValue1.length - 1);
						show.value = numValue1;
					} else {
						numValue1 = '0';
						show.value = numValue1;
					}
				}
			}
		}
	</script>
</html>