JavaScript-DOM-计算器小例子

最新推荐文章于 2022-03-02 02:21:58 发布

weixin_44389442

最新推荐文章于 2022-03-02 02:21:58 发布

阅读量445

点赞数 2

分类专栏： JS 文章标签： JavaScript DOM 计算器小例子

本文链接：https://blog.csdn.net/weixin_44389442/article/details/86545432

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天给大家带来了一个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>