js实现简易计算器

spy过家家

于 2022-06-13 21:24:34 发布

阅读量126

点赞数 4

文章标签： javascript css html

本文链接：https://blog.csdn.net/zm8454/article/details/125267836

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 400px;
				/* height: 400px; */
				background-color: #6C6C6C;
				padding: 20px;
			}

			.xsp {
				width: 300px;
				height: 40px;
				margin: 0 auto;
				background-color: white;
				line-height: 40px;
			}

			.anjan {
				background-color: #11B006;
				width: 400px;
				/* height: 300px; */
				margin-top: 40px;
			}

			button {
				display: inline-block;
				width: 100px;
				height: 40px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="xsp" id="first">
				
			</div>
			<div class="anjan">
				<button onclick="jsq('1')">1</button>
				<button onclick="jsq('2')">2</button>
				<button onclick="jsq('3')">3</button>
				<button onclick="jsq('4')">4</button>
				<button onclick="jsq('5')">5</button>
				<button onclick="jsq('6')">6</button>
				<button onclick="jsq('7')">7</button>
				<button onclick="jsq('8')">8</button>
				<button onclick="jsq('9')">9</button>
				<button onclick="jsq('0')">0</button>
				<button onclick="jsq('-')">-</button>
				<button onclick="jsq('+')">+</button>
				<button onclick="jsq('*')">*</button>
				<button onclick="jsq('/')">/</button>
				<button onclick="dy()">=</button>
				<button onclick="sc()">Delete</button>
			</div>
		</div>
		<script>
			var _first = document.getElementById("first");

			function jsq(param) {
				_first.innerText = _first.innerText+param
			}
			function dy(){
				_first.innerText=eval(_first.innerText)
			}
			function sc(){
				_first.innerText=null
			}
		</script>
	</body>
</html>

页面效果