使用js实现计算器

最新推荐文章于 2022-01-03 18:54:56 发布

道法—自然

最新推荐文章于 2022-01-03 18:54:56 发布

阅读量2.2k

点赞数 5

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103499587

版权

前端页面专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用js实现计算器</title>
		<style type="text/css">
		/*设置整个div的位置及外边框*/
			#cal{border: solid 1px;
			 width: 300px; 
			 height: 360px; 
			 background-color: bisque;
			 text-align: center;
			 border-radius: 10px;
			 margin: auto;/*控制页面是否居中显示，如果为居中显示，那么就会用auto*/
			margin-top: 50px;	
			 }
			 /*设置文本框样式*/
			 #data{
			 	width: 280px;
			 	height: 30px;
			 	background-color: white;
			 	font-size: 15px;
			 	margin-top: 15px;
			 	margin-left: 6.5px;
			 }
			 /*设置按钮的样式*/
			input[type=button]{
				width: 55px;
				height: 55px;
				font-size: 25px;
				margin: 5px;
				background-color: #ccc;
			}
		</style>
		<!--声明JS代码域-->
		<script type="text/javascript">
		//声明计算器功能函数
			function testMath(val){
				//获取计算器文本框中的内容
				var inp=document.getElementById("data");
				//使用switch实现计算器的运算
				switch(val){
					case "=":
					inp.value=eval(inp.value);
					break;
					case "c":
					inp.value="";
					break;
					default:
					inp.value=inp.value+val;
					break;
				}
			}
		</script>
	</head>
	<body>
		<h2>
			使用js技术实现计算器
		</h2>
		<hr />
		<div id="cal">
			<input type="text" name="" id="data" value="" />
			<input type="button" name="" id="" value="1" onclick="testMath(this.value)"/>
			<input type="button" name="" id="" value="2" onclick="testMath(this.value)"/>
			<input type="button" name="" id="" value="3" onclick="testMath(this.value)"/>
			<input type="button" name="" id="" value="4" onclick="testMath(this.value)"/><br />
			<input type="button" name="" id="" value="5" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="6" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="7" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="8" onclick="testMath(this.value)"/><br />
			<input type="button" name="" id="" value="9" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="0" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="+" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="-" onclick="testMath(this.value)" /><br />
			<input type="button" name="" id="" value="*" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="/" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="=" onclick="testMath(this.value)" />
			<input type="button" name="" id="" value="c" onclick="testMath(this.value)" /><br />
		</div>
	</body>
</html>

道法—自然

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
使用js实现计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用js实现计算器</title> <style type="text/css"> /*设置整个div的位置及外边框*/ #cal{border: solid 1px;...
复制链接

扫一扫

专栏目录