js做简单计算器

js做简单计算器_第1张图片
eval可以将字符串转换为程序代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style type="text/css">
			#d1{
				border: solid 1px;
				width: 300px;
				height: 400px;
				text-align: center;
				margin: auto;
				margin-top: 90px;
				border-radius: 10px;
				background-color: lightgrey;
			}
			input[type=text]{
				margin-top: 15px;
				width: 270px;
				height: 35px;
				margin-left: 10px;
				margin-right: 10px;
				font-size: 24px;
			}
			input[type=button]{
				width: 60px;
				height: 60px;
				margin-top: 20px;
				margin-right: 5px;
				font-size: 20px;
			}
		</style>
		<script type="text/javascript">
			function test(btn){
			//获取button对象
			var num=btn.value;
			switch(num){
				case "=":
				document.getElementById("inp").value=eval(document.getElementById("inp").value);break;
				case "c":  document.getElementById("inp").value="";  break;
				default:
				document.getElementById("inp").value+=num;break;
			
			}
			
			
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<input type="text" name="" id="inp" value="" readonly="readonly"/> />
			
			<input type="button" name="" id="" value="1"  onclick="test(this)"/>
			<input type="button" name="" id="" value="2"  onclick="test(this)"/>
			<input type="button" name="" id="" value="3"  onclick="test(this)"/>
			<input type="button" name="" id="" value="/" onclick="test(this)"/> />
			<input type="button" name="" id="" value="4" onclick="test(this)"/>
			<input type="button" name="" id="" value="5" onclick="test(this)" />
			<input type="button" name="" id="" value="6" onclick="test(this)"/>
			<input type="button" name="" id="" value="*" onclick="test(this)"/> />
			<input type="button" name="" id="" value="7"  onclick="test(this)" />
			<input type="button" name="" id="" value="8"  onclick="test(this)" />
			<input type="button" name="" id="" value="9"  onclick="test(this)"/>
			<input type="button" name="" id="" value="-" onclick="test(this)"/> />
			<input type="button" name="" id="" value="c" onclick="test(this)"/>
			<input type="button" name="" id="" value="0"  onclick="test(this)"/>
			<input type="button" name="" id="" value="+" onclick="test(this)"/>
			<input type="button" name="" id="" value="=" onclick="test(this)"/>
		</div>
	</body>
</html>

你可能感兴趣的:(前端)