通过js实现计算器功能--入门版

码来码去（未来可期）

已于 2024-06-15 13:40:05 修改

阅读量319

点赞数 9

分类专栏：前端文章标签： javascript 前端 css

于 2024-06-14 09:22:31 首次发布

本文链接：https://blog.csdn.net/weixin_68489989/article/details/139669442

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

入门版计算器，每个按钮分别添加方法，比较繁琐，但是逻辑很简单

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style>
			* {
				margin: 0px;
			}
			.background {
				margin: auto;
				height: 600px;
				width: 500px;
				background-color: azure;
				border: 3px solid black;
			}
			#head {
				height: 200px;
				width: 500px;
				background-color: lightgray;
				color: cyan;
				font-size: 60px;
				line-height: 200px;
				text-align: center;
			}
			.foot {
				height: 400px;
				width: 500px;
				background-color: bisque;
			}
			.foot>span {
				display: block;
				margin: 5px;
				border-radius: 5px;
				width: 115px;
				height: 90px;
				background-color: slategray;
				color: white;
				float: left;
				text-align: center;
				line-height: 90px;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div class="background">
			<div id="head">
			</div>
			<div class="foot">
				<span id="a7" onclick="fun7()">7</span><span id="a8" onclick="fun8()">8</span>
				<span id="a9" onclick="fun9()">9</span><span id="adel" onclick="fundel()">删除</span>
				<span id="a4" onclick="fun4()">4</span><span id="a5" onclick="fun5()">5</span>
				<span id="a6" onclick="fun6()">6</span><span id="ajian" onclick="funjian()">-</span>
				<span id="a1" onclick="fun1()">1</span><span id="a2" onclick="fun2()">2</span>
				<span id="a3" onclick="fun3()">3</span><span id="ajia" onclick="funjia()">+</span>
				<span id="achu" onclick="funchu()">÷</span><span id="a0" onclick="fun0()">0</span>
				<span id="acheng" onclick="funcheng()">×</span><span id="adengyu" onclick="fundengyu()">=</span>
			</div>
		</div>
		<script>
			var a = 0;
			var b = 0;
			var c = 0;
			var str = "";
			function fun1() {
				var a1 = document.getElementById("a1");
				var head = document.getElementById("head");
				str = str + a1.innerHTML;
				head.innerHTML = str;
			}
			function fun2() {
				var a2 = document.getElementById("a2");
				var head = document.getElementById("head");
				str = str + a2.innerHTML;
				head.innerHTML = str;
			}
			function fun3() {
				var a3 = document.getElementById("a3");
				var head = document.getElementById("head");
				str = str + a3.innerHTML;
				head.innerHTML = str;
			}
			function fun4() {
				var a4 = document.getElementById("a4");
				var head = document.getElementById("head");
				str = str + a4.innerHTML;
				head.innerHTML = str;
			}
			function fun5() {
				var a5 = document.getElementById("a5");
				var head = document.getElementById("head");
				str = str + a5.innerHTML
				head.innerHTML = str;
			}
			function fun6() {
				var a6 = document.getElementById("a6");
				var head = document.getElementById("head");
				str = str + a6.innerHTML
				head.innerHTML = str;
			}
			function fun7() {
				var a7 = document.getElementById("a7");
				var head = document.getElementById("head");
				str = str + a7.innerHTML
				head.innerHTML = str;
			}
			function fun8() {
				var a8 = document.getElementById("a8");
				var head = document.getElementById("head");
				str = str + a8.innerHTML;
				head.innerHTML = str;
			}
			function fun9() {
				var a9 = document.getElementById("a9");
				var head = document.getElementById("head");
				str = str + a9.innerHTML;
				head.innerHTML = str;
			}
			function fun0() {
				var a0 = document.getElementById("a0");
				var head = document.getElementById("head");
				str = str + a0.innerHTML;
				head.innerHTML = str;
			}
			function funjia() {
				var ajia = document.getElementById("ajia");
				var head = document.getElementById("head");
				a = parseInt(str);
				str = "";
				c = 1;
				head.innerHTML = str;
			}
			function funjian() {
				var ajian = document.getElementById("ajian");
				var head = document.getElementById("head");
				a = parseInt(str);
				str = "";
				c = 2;
				head.innerHTML = str;
			}
			function funcheng() {
				var acheng = document.getElementById("acheng");
				var head = document.getElementById("head");
				a = parseInt(str);
				str = "";
				c = 3;
				head.innerHTML = str;
			}
			function funchu() {
				var achu = document.getElementById("achu");
				var head = document.getElementById("head");
				a = parseInt(str);
				str = "";
				c = 4;
				head.innerHTML = str;
			}
			function fundel() {
				a = 0;
				b = 0;
				c = 0;
				str = "";
				var head = document.getElementById("head");
				head.innerHTML = str;
			}
			function fundengyu() {
				var head = document.getElementById("head");
				b = parseInt(str);
				if (c == 1) {
					head.innerHTML = a + b;
					str = "";
				} else if (c == 2) {
					head.innerHTML = a - b;
					str = "";
				} else if (c == 3) {
					head.innerHTML = a * b;
					str = "";
				} else if (c == 4) {
					head.innerHTML = a / b;
					str = "";
				}
			}
		</script>
	</body>
</html>