web前端——笔记3（做一个简易计算器）

最新推荐文章于 2025-08-19 13:47:23 发布

原创

最新推荐文章于 2025-08-19 13:47:23 发布 · 3k 阅读

18 ·

CC 4.0 BY-SA版权

周末在家无事，就想写一个计算器来玩，然后去百度看了好多大牛写的代码感觉很复杂，以我现在的程度还是难以理解，所以我自己写了一个特别简单的计算器。直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<style type="text/css">
			p{
				text-align: center;
                font-size: 16px;
			}
			.box{
				margin:  0 auto;
				width: 215px;
				height: 245px;
				border: 1px solid red;
			}
			.sty{
				width: 50px;
				height: 30px;
				margin-top: 6px;
				border-radius: 17px;
				cursor: pointer;
			}
			.sty:hover{
				background-color: aquamarine;
			}
			#field{
				line-height: 50px;
				font-size: 39px;
				width: 212px;
				height: 51px;
				border-bottom: 1px solid #FF0000;
				margin-bottom: -20px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div type="text" id="field" /></div> <br />
			<input class = "sty" type="button" onclick="num(7)" value="7"/>
			<input class = "sty" ty