js制作简易计算器

最新推荐文章于 2023-12-01 19:30:20 发布

游标卡尺_.

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量249

点赞数 2

文章标签： javascript css3 css

本文链接：https://blog.csdn.net/wwwwwwzzz/article/details/125267869

版权

html、css部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 600px;
				height: 600px;
				background: gray;
			}
			.box1{
				width:400px;
				margin: 0 auto;
			}
			.box1 input{
				width: 400px;
				height: 80px;
			}
			.box2{
				width: 592px;
				height: 480px;
				background-color: green;
				margin: 25px auto 0;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			button{
				width: 120px;
				height: 50px;
				font-size: 20px;
				margin: 10px 0;
				border-radius: 10px;
			}
			button:hover{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box1">
				<input type="text" id="num">
			</div>
			<div class="box2">
			<!-- onclick点击事件 cal实参 --!>
				<button onclick="cal('1')">1</button>
				<button onclick="cal('2')">2</button>
				<button onclick="cal('3')">3</button>
				<button onclick="cal('4')">4</button>
				<button onclick="cal('5')">5</button>
				<button onclick="cal('6')">6</button>
				<button onclick="cal('7')">7</button>
				<button onclick="cal('8')">8</button>
				<button onclick="AC()">AC</button>
				<button onclick="cal('+')">+</button>
				<button onclick="cal('-')">-</button>
				<button onclick="cal('*')">*</button>
				<button onclick="cal('/')">/</button>
				<button onclick="btn()">=</button>
			</div>
		</div>
	</body>
</html>

js部分

<script>
	var num=document.getElementById("num")
	//param形参 
	function cal(param){
		num.value=num.value+param
	}
	function btn(){
		num.value=eval(num.value)
	}
	function AC(){
		num.value=""
	}
</script>