JavaScript实验之简易计算器

laiczhang
laiczhang
laiczhang
67
文章
0
评论
2020年5月10日21:40:03 评论 19 1346字阅读4分29秒

JavaScript实验之简易计算器

实验要求:

1、网页效果如图所示;

2、使用事件对象来判断计算器的具体操作。

3、用JavaScript对数据进行检验,不能为空,不能为非数字,除数不能为0,给出提示信息。

4、本实验不允许使用onclick事件响应以及动态绑定事件功能。

5、使用事件监听器对事件源和事件进行监听。

JavaScript实验之简易计算器

源代码

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>简易计算器</title>
	</head>
	<body>
		<table>
			<tr>
				<td>第一个数:</td>
				<td colspan="4">
					<input type="text" id="num1"/>
				</td>
			</tr>
			<tr>
				<td>第二个数:</td>
				<td colspan="4">
					<input type="text" id="num2"/>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<button>+</button>&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					<button>-</button>&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					<button>*</button>&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					<button>/</button>
				</td>
			</tr>
			<tr>
				<td>计算结果:</td>
				<td colspan="4">
					<input type="text" id="num3"/>
				</td>
			</tr>
		</table>
		<script>
			var btn = document.getElementsByTagName('button');
			for(var i=0; i<btn.length; i++){
				btn[i].addEventListener('click', function(){
					show(event);
				});
			}
			
			function show(event){
				var otarget;
				if(window.event){
					event = window.event;
					otarget = event.srcElement;
				}else{
					otarget = event.target;
				}
				var onum1 = document.getElementById('num1').value;
				var onum2 = document.getElementById('num2').value;
				var result = document.getElementById('num3');
				
				// 对数据进行检验,如不符合要求则给出提示信息
				if(onum1 == '' || onum2 == ''){
					alert("不能为空!");
				}
				
				if(isNaN(onum1) || isNaN(onum2)){
					alert("不能为非数字!");
				}
				
				if(onum2 == 0){
					if(otarget.innerHTML = '/'){
						alert("除数不能为0!");
					}
				}
				
				result.value = eval(onum1 + otarget.innerHTML + onum2);
			}
		</script>
	</body>
</html>

参考技术:

  1. JS获取网页元素的值;
  2. JS事件模型以及事件对象event;
  3. JS内置函数isNaN、eval和数字转换;
  4. JS事件监听addEventListener。
继续阅读
laiczhang
WordPress禁用文章修订和自动保存功能 网站维护

WordPress禁用文章修订和自动保存功能

前言 WordPress有个文章修订和自动保存功能,作用是在你编辑文章后就会帮你自动保存 那么无论是遇到浏览器奔溃,电脑故障等等问题都不会有太大的损失 但有个问题在于:文章修订和自动保存功能一方面会有...
Hostloc发超链接的方法 骚操作

Hostloc发超链接的方法

Hostloc是一个讨论全球云服务器的面向国内用户的论坛,采用的是Discuz程序。 Discuz是支持UBB的,但是在Hostloc对超链接的UBB进行了一定的处理,常规的UBB会自动转为文本 那么...