js+css实现简易计算器

最新推荐文章于 2023-04-04 12:07:35 发布

Webwangbo

最新推荐文章于 2023-04-04 12:07:35 发布

阅读量141

点赞数 3

分类专栏： js css 文章标签： css javascript html

本文链接：https://blog.csdn.net/Webwangbo/article/details/125267843

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 1000px;
				border: 1px solid;
				margin: 0 auto;
				display: flex;
			    flex-wrap: wrap;
				
			}
			.wrapper .box{
				width: 100%;
				height: 150px;
				background-color: dimgray;
				display: flex;
				justify-content: space-around;
				
			}
			#import{
				width: 600px;
				height: 100px;
			}
			.wrapper div:nth-of-type(2){
				width: 100%;
				height: 500px;
				background-color: green;
				display: flex;
				flex-wrap: wrap;
				padding: 20px;
				justify-content: space-around;
			}
			 button{
				display: inline-block;
				width: 200px;
				height: 50px;
				font-weight: 700;
				font-size: 20px;
				
			}
			input{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box">
				<input id="import" type="text">
			</div>
			<div>
				<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="cal('+')">+</button>
				<button  onclick="cal('-')">-</button>
				<button  onclick="cal('*')">*</button>
				<button  onclick="cal('/')">/</button>
				<button  onclick="res('=')">=</button>
				<button  onclick="nul('AC')">AC</button>
				
			</div>
		</div>
		<script>
		    var _import=document.getElementById("import"); //获取import
			var b=0;
			function cal(num){
				b=num;
				_import.value+=b;
			}
			function res(){
				_import.value=eval(_import.value);    //将字符串以js代码输出
			}
			function nul(){
				_import.value=null; //清除
			}
		</script>
	</body>
</html>

效果图：