简易计算器

最新推荐文章于 2024-10-01 23:20:42 发布

郭郭郭憨憨

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量66

点赞数 3

本文链接：https://blog.csdn.net/qq_59494319/article/details/125267118

版权

简易计算器代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div:nth-of-type(1){
				width: 290px;
				height: 80px;
				background-color: #6C6C6C;
				display: flex;
				align-items: flex-start;
				justify-content: center;
			}
			div:nth-of-type(2){
				width: 290px;
				height: 300px;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				justify-content: space-around;
				background-color: #11B006;
			}
			button{
				width: 60px;
				height: 50px;
			}
			input{
				width: 200px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" id="first">
		</div>
		<div>
			<button onclick="getnum('1')">1</button>
			<button onclick="getnum('2')">2</button>
			<button onclick="getnum('3')">3</button>
			<button onclick="getnum('4')">4</button>
			<button onclick="getnum('5')">5</button>
			<button onclick="getnum('6')">6</button>
			<button onclick="getnum('7')">7</button>
			<button onclick="getnum('8')">8</button>
			<button onclick="getnum('+')">+</button>
			<button onclick="getnum('-')">-</button>
			<button onclick="getnum('*')">*</button>
			<button onclick="getnum('/')">/</button>
			<button onclick="res()">=</button>
		</div>
		<script>
			a=document.getElementById("first");
			let b=0;
			function getnum(num){
					b=num;
					a.value+=b;//输出式子
			}
			function res(){
				a.value=eval(a.value);//输出结果
			}
		</script>
	</body>
</html>