HTML+CSS+JS编写一个简单的计算器

最新推荐文章于 2024-07-12 16:27:40 发布

城院小风车

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量288

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_48348165/article/details/108597236

版权

HTML+CSS+JS编写一个简单的计算器

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.bg {
				margin: 0 auto;
				border: gray solid 3px;
				border-radius: 10px;
				background-color: #000000;
				width: 300px;
				height: 380px;
			}

			#screen {
				box-sizing: border-box;
				width: 260px;
				height: 100px;
				padding-top: 60px;
				padding-left: 10px;
				margin: 20px auto;
				border: gray solid 3px;
				border-radius: 12pX;
				color: white;
				font-size: 16px;
			}

			table {
				margin: 20px auto;
				border-spacing: 4px;
			}

			input {
				font-size: 20px;
				font-weight: bold;
				width: 58px;
				height: 38px;
			}

			#ac,
			#zero {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div id="screen"></div>
			<table>
				<tr>
					<td colspan="2"><input type="button" id="ac" value="AC" onclick=""></td>
					<td><input type="button" id="chu" value="÷" onclick=""></td>
					<td><input type="button" id="mod" value="%" onclick=""></td>
				</tr>
				<tr>
					<td><input type="button" value="7"></td>
					<td><input type="button" value="8"></td>
					<td><input type="button" value="9"></td>
					<td><input type="button" value="+"></td>
				</tr>
				<tr>
					<td><input type="button" value="4"></td>
					<td><input type="button" value="5"></td>
					<td><input type="button" value="6"></td>
					<td><input type="button" value="-"></td>
				</tr>
				<tr>
					<td><input type="button" value="1"></td>
					<td><input type="button" value="2"></td>
					<td><input type="button" value="3"></td>
					<td><input type="button" value="×" onclick=""></td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" id="zero" value="0"></td>
					<td><input type="button" value="."></td>
					<td><input type="button" id="dy" value="=" onclick=""></td>
				</tr>
			</table>


		</div>
		<script type="text/javascript">
			var screen = document.getElementById('screen');

			function click() {
				switch (this.value) {
					case 'AC':
						screen.innerText = '';
						break;
					case '=':
						screen.innerText += '=' + eval(screen.innerText);
						break;
					default:
						screen.innerText += this.value;
				}
			}
			document.querySelectorAll('input').forEach(function(e) {
				e.onclick = click;
			});
		</script>
	</body>
</html>

城院小风车

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS编写一个简单的计算器

HTML+CSS+JS编写一个简单的计算器效果图：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bg { margin: 0 auto; border: gray solid 3px; border-radius: 10px;
复制链接

扫一扫