90-(JSON)简易计算器

七色的天空

已于 2023-09-23 11:57:14 修改

阅读量46

点赞数

分类专栏： 04_JavaScript 文章标签： json css css3

于 2023-09-23 11:57:03 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/133202052

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font:bold 14px Arial;
		}
		/*计算器面板*/
		.calculator{
			width: 325px;
			/*height: 500px;*/
			margin: 100px auto;
			background-color: #9dd2ea;
			background-image: linear-gradient(#9dd2ea,#8bceec);
			border-radius: 3px;
			box-shadow: 0 4px #009de4,0 10px 15px rgba(0,0,0,.2);
			padding: 20px 20px 9px;
		}
		.top .clear{
			float: left;
		}
		.top .screen{
			float: right;
			width: 212px;
			height: 40px;
			text-align: right;
			background-color: rgba(0,0,0,.2);
			border-radius: 3px;
			box-shadow: inset 0 4px rgba(0,0,0,.2);
			font-size: 17px;
			line-height: 40px;
			color: #777;
			text-shadow: 1px 1px 2px rgba(0,0,0,.2);
			letter-spacing: 1px;
		}
		/*清除浮动*/
		.top,.keys{
			overflow: hidden;
		}
		.keys span,.top span{
			float: left;
			width: 66px;
			height: 36px;
			background-color: #fff;
			border-radius: 3px;
			box-shadow: 0 4px rgba(0,0,0,.2);
			margin: 0 7px 11px 0;
			text-align: center;
			line-height: 36px;
			color: #888;
			cursor: pointer;
			transition: all .3s;
			position: relative;
			top: 0;
		}
		.keys .operator{
			margin-right: 0;
			background-color: #fff0f5;
		}
		.top .clear{
			background-color: #ff9fa8;
			box-shadow: 0 4px #ff7c87;
			color: #fff;
		}
		.keys .eval{
			background-color: #f1ff92;
			box-shadow: 0 4px #9da853;
			color: #888e5f;
		}
		.keys span:hover{
			background-color: #9c89f6;
			box-shadow: 0 4px #6b54d3;
		}
		.keys .eval:hover{
			background-color: #abb850;
			box-shadow: 0 4px #717a33;
			color: #fff;
		}
		.top .clear:hover{
			background-color: #f68991;
			box-shadow: 0 4px #d3545d;
			color: #fff;
		}

		.keys span:active{
			top: 4px;
			box-shadow: 0 0px #6b54d3;
		}
		.keys .eval:active{
			top: 4px;
			box-shadow: 0 0px #717a33;
		}
		.top .clear:active{
			top: 4px;
			box-shadow: 0 0px #d3545d;
		}
	</style>
</head>
<body>
	<div class="calculator">
		<!-- 清除按钮 屏幕 -->
		<div class="top">
			<span class="clear">C</span>
			<div class="screen"></div>
		</div>
		<!-- 数字按键 运算符 -->
		<div class="keys">
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span class="operator">+</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span class="operator">-</span>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span class="operator">*</span>
			<span>0</span>
			<span>.</span>
			<span class="eval">=</span>
			<span class="operator">/</span>
		</div>
	</div>
	<script>
		// alert(eval('1 * 2 + 3.5 + .5'));
		// 1.取键元素
		var spanArr = document.querySelectorAll('span');
		var screen = document.querySelector('.screen');

		// 2.给每一个span绑定事件
		for(var i = 0; i < spanArr.length; i++) {
			spanArr[i].onclick = function() {
				// 取屏幕上的值
				var screenVal = screen.innerText;
				// 点击的span的值
				var clickVal = this.innerText;
				if (clickVal == 'C') {
					screen.innerText = ''
				} else if (clickVal == '=') {
					screen.innerText = eval(screenVal);
				} else {
					screen.innerText = screenVal + clickVal
				}
			}
		}
	</script>
</body>
</html>

上述运行结果: