前端笔记47——利用JavaScript计算两个数的差

需求

在两个输入框中输入两个数字，点击按钮的时候，计算出两个数字的差并且显示到id为result的div中。

实现代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding-top: 100px;
				text-align: center;
			}
			#result{
				width: 50%;
				height: 100px;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
		</style>
	</head>

	<body>
		<input type="text" id="ipt1"/>
		<input type="text" id="ipt2"/>
		<button id="btn">计算</button>
		<div class="result"></div>
		<script type="text/javascript">
			// 得到input里面的值，然后拿到减，把结果放到div中
			// input.value   div.innerHTML  事件绑定
			// 找对象 input button div
			var oIpt1 = document.getElementById("ipt1")
			var oIpt2 = document.getElementById("ipt2")
			var oBtn = document.getElementById("btn")
			var oBox = document.getElementById("result")
			// 事件函数绑定
			oBtn.onclick = function(){
				// 计算input里面数字的差 然后放到div中
				var num1 = oIpt1.value
				var num2 = oIpt2.value
				var result = num1-num2
				// 给div设置一个内容 result
				oBox.innerHTML = result
			}
		</script>
	</body>

</html>

上面代码实现刚开始说的需求，希望对学习前端开发的小伙伴有帮助。