js 计算器案例

最新推荐文章于 2021-11-19 07:50:12 发布

神奇大叔

最新推荐文章于 2021-11-19 07:50:12 发布

阅读量194

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102769243

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

<html>
	<head>
		<title>js 加法器</title>
		<meta charset="utf-8"/>
		<!--js-->
		<script type="text/javascript">
			function test(btn){  //因为js只有一种类型var，所以形类型可以省略
				/*获取button按钮对象及其属性的值*/
				var num=btn.value;  //btn为对象
				/*将按钮值赋值给input输入框*/
				switch(num)
				{
					case "=":
							/*eval()函数将字符串转换成可执行的js代码，即执行算数运算*/
						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>
		<!--css-->
		<style type="text/css">
			#showdiv{
				border:solid 1px;
				border-radius: 5px;
				width:310px;
				height:400px;
				text-align: center;
				margin:auto;
				margin-top:50px;
				background-color: antiquewhite;
			}
			input[type=text]{
				margin-top:10px;
				width:290px;
				height:40px;
				font-size:25px;
			}
			input[type=button]{
				width:60px;
				height:60px;
				margin-top:20px;
				margin-left:5px;
				margin-right:5px;
				font-size:30px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h3 align="center">js 加法器</h3>
		<hr size="30" color="aquamarine"/>
		
		<div id="showdiv">                            <!--readonly只能点不能键盘写-->
			<input type="text" name="" id="inp" value="" readonly="readonly" /><br />
			<input type="button" name="" id="btn" 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="4"onclick="test(this)"/><br />
			<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="7"onclick="test(this)"/>
			<input type="button" name="" id="" value="8"onclick="test(this)"/><br />
			<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="-"onclick="test(this)"/>
			<input type="button" name="" id="" value="*"onclick="test(this)"/><br />
			<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="c"onclick="test(this)"/>
			<input type="button" name="" id="" value="="onclick="test(this)"/>
			
			
			
		</div>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 计算器案例

<html> <head> <title>js 加法器</title> <meta charset="utf-8"/>  <script type="text/javascript"> function test(btn){ //因为js只有一种类型var，所以形类型可以...
复制链接

扫一扫