08-计算器案例

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_30586085

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dream2060/p/10895675.html

版权

<html>
	<head>
		<title>计算器</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
		/*设置div样式*/
			#showdiv{
				border:  solid 1px;
				border-radius: 10px;/*设置边框角度*/
				width: 320px;
				height:400px;
				text-align: center;
				margin: auto;/*设置居中*/
				margin-top: 50px;
				background-color: floralwhite;	
			
				
			}
		/*设置输入框样式*/
			input[type=text]{
				margin-top: 20px;
				width: 290px;
				height: 40px;
				font-size: 20px;
				
			}
		/*设置按钮样式*/
			input[type=button]{
				width: 60px;
				height: 60px;
				margin-top: 20px;
				margin-left: 5px;
				margin-right: 5px;
				font-size: 30px;
				font-weight: bold;
				font-family: "萝莉体 第二版";
			}  
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明函数
			function test(btn){
				//获取button按钮对象的value值
				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:
						//将按钮的值赋`值给input输入框
						document.getElementById("inp").value=document.getElementById("inp").value+num;
						break;
				}
			}
		</script>
	</head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
			<input type="button" name="" id="btn" value="1"value="" οnclick="test(this)"/>
			<input type="button" name="" id="" value="2" οnclick="test(this)"/>
			<input type="button" name="" id="" value="3" οnclick="test(this)"/>
			<input type="button" name="" id="" value="4" οnclick="test(this)"/><br />
			<input type="button" name="" id="" value="5" οnclick="test(this)"/>
			<input type="button" name="" id="" value="6" οnclick="test(this)"/>
			<input type="button" name="" id="" value="7" οnclick="test(this)"/>
			<input type="button" name="" id="" value="8" οnclick="test(this)"/><br />
			<input type="button" name="" id="" value="9" οnclick="test(this)"/>
			<input type="button" name="" id="" value="+" οnclick="test(this)"/>
			<input type="button" name="" id="" value="-" οnclick="test(this)"/>
			<input type="button" name="" id="" value="*" οnclick="test(this)"/><br />
			<input type="button" name="" id="" value="0" οnclick="test(this)"/>
			<input type="button" name="" id="" value="/" οnclick="test(this)"/>
			<input type="button" name="" id="" value="c" οnclick="test(this)"/>
			<input type="button" name="" id="" value="=" οnclick="test(this)"/>
		</div>
	</body>
</html>

转载于:https://www.cnblogs.com/dream2060/p/10895675.html

weixin_30586085

关注

0
点赞
踩
0

收藏

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

<html> <head> <title>计算器</title> <meta charset="UTF-8"/>  <style type="text/css"> /*设置div样式*/ #showdiv{ border: so...
复制链接

扫一扫