JavaScript-DOM-计算器小例子

时间:2019-01-18
本文章向大家介绍JavaScript-DOM-计算器小例子,主要包括JavaScript-DOM-计算器小例子使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天给大家带来了一个DOM(文档对象模型)的一个小例子
代码虽然简陋,但是实现了简单的加减乘除的功能:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" name="" id="ipt1">
	<select id="set">
		<option>+</option>
		<option>-</option>
		<option>*</option>
		<option>/</option>
	</select>
	<input type="txet" name="" id="ipt2">
	<button id="btn">=</button>
	<input type="text" name="" id="ipt3">
	<script type="text/javascript">
		//找到页面元素并保存在变量里
		var ipt1=document.getElementById('ipt1');
		var ipt2=document.getElementById('ipt2');
		var ipt3=document.getElementById('ipt3');
		var select=document.getElementById('set');
		var btn=document.getElementById('btn');
		//为按钮添加点击事件
		btn.onclick=function(){
			//实现加减乘除功能
			var ipv1=parseFloat(ipt1.value);
			var ipv2=parseFloat(ipt2.value);
			var sev=select.value;
			var num;
			switch(sev){
				case "+":
					num=ipv1+ipv2;
					break;
				case "-":
					num=ipv1-ipv2;
					break;
				case "*":
					num=ipv1*ipv2;
					break;
				case "/":
					num=ipv1/ipv2;
					break;
				default:
					num="输入错误";
					break;
			}
			 ipt3.value=num;
		}
	</script>
</body>
</html>