Java Web 程序设计第四章 JavaScript基础 4.6 事件_n1 = number(document.form1.txt1.value)-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_43443133/article/details/105379589

4.6 事件

1.JavaScript事件--核心知识点

2.JavaScript事件--简易加法器设计

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易加法器设计</title>
</head>
<body>
	<script type="text/javascript">
		function add(){
			n1=Number(document.form1.txt1.value);
			n2=Number(document.form1.txt2.value);
			document.form1.txt3.value=n1+n2;
		}
	</script>
	<form name="form1">
		加数1：<input type="text" name="txt1"><br>
		加数2：<input type="text" name="txt2"><br>
		<input type="button" onclick="add()" value="求和">
		<input type="reset" value="重置"><br>
		结果：<input type="text" name="txt3"><br>
	</form>
</body>
</html>

3.JavaScript事件--简易计算器设计

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器设计</title>
</head>
<body>
	<p>整数1：<input type="text" id="num1">
	<p>整数2：<input type="text" id="num2">
	<p><input type="button" value="相加"  onclick="calc(add)">
		<input type="button" value="相减"  onclick="calc(sub)">
		<input type="button" value="相乘"  onclick="calc(mul)">
		<input type="button" value="相除"  onclick="calc(div)">
	
	<p>结果：<input type="text" id="result" readonly>
	
	<script>
	function calc(){
		var num1=parseInt(document.getElementById("num1").value);
		var num2=parseInt(document.getElementById("num2").value);
		var result=document.getElementById("result");
		if(isNaN(num1)||isNaN(num2)){
			alert("请输入数字");
			result false;
		}
		result.value=func(num1,num2);
	}
		
	function add(num1,num2){	//加法
		return num1+num2;
	}
	function sub(num1,num2){	//减法
		return num1-num2;
	}
	function mul(num1,num2){	//乘法
		return num1*num2;
	}
	function add(num1,num2){	//除法
		if(num==0){
			alert("分母不能为0");
			return;
		}
		return num1/num2;
	}
	
	</script>
</body>
</html>

4.JavaScript事件--登录验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录验证</title>
</head>
<body>
	<script type="text/javascript">
		function validate(){
			account=document.loginForm.account.value;	//获取文本框的值
			password=document.loginForm.password.value;	//获取密码框的值
			if(account==""){
				alert("账号不能为空");
				document.loginForm.account.focus();	//聚焦
				return;
			}
			if(password==""){
				alert("密码不能为空");
				document.loginForm.password.focus();	//聚焦
				return;
			}
			document.loginForm.submit();
		}
	</script>
	欢迎您登录：
	<form name=loginForm>
	账号：<input name="account" type="text"><br>
	密码：<input name="password" type="password"><br>
	<input type="submit" onclick="validate()" value="登录">
	</form>

</body>
</html>