08-计算器案例

Posted dream2060

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08-计算器案例相关的知识，希望对你有一定的参考价值。

<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="" 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>

　　

以上是关于08-计算器案例的主要内容，如果未能解决你的问题，请参考以下文章

Android开发应用案例——简易计算器（附完整源码）

Flutter 布局备忘录

如何计算破折号媒体片段名称的 $Time$ 变量？

片段布局加载延迟

详细实例说明+典型案例实现 对动态规划法进行全面分析 | C++

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段