js课后作业

最新推荐文章于 2025-04-01 16:50:59 发布

庄文杰21

最新推荐文章于 2025-04-01 16:50:59 发布

阅读量345

点赞数

文章标签： servlet java 前端

本文链接：https://blog.youkuaiyun.com/weixin_70649267/article/details/127081970

版权

这是一份JavaScript课后作业，包括实现三个页面间的跳转，运用history对象；创建一个带有用户名、密码和确认密码验证的界面，提供错误提示；以及利用onblur事件将文本框中的英文字符自动转换为大写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，将今日在课堂上讲的三个页面之间的跳转写出来，注意history对象的使用

1，如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="打开index2.html" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function () {
				location.assign("index2.html")
			}
		</script>
	</body>
</html>

2，如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="back" />
		<input type="button" id="btn2" value="打开index3.html" />
		<input type="button" id="btn3" value="forward()" />
		<input type="button" id="btn4" value="go" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick = function() {
				history.back()
			}
			document.getElementById("btn2").onclick = function() {
				location.assign("index3.html")
			}
			document.getElementById("btn3").onclick = function() {
				history.forward()
			}
			document.getElementById("btn4").onclick = function() {
				history.go(1)
			}
		</script>
	</body>
</html>

3，如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="返回index2.html" />
		<input type="button" id="btn2" value="go" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function () {
				location.assign("index2.html")
			}
			document.getElementById("btn2").onclick=function () {
				history.go(-1)
			}
		</script>
	</body>
</html>

二，制作如下界面，实现用户名、密码和确认密码的验证，并给与一定的提示消息

如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
		<tr>
				<td>账户:</td>
				<td>
					<input type="text" name="a1" id="a1" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="b1"></label>
				</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td>
					<input type="password" name="a2" id="a2" value="" onblur="checkpwd()" />
				</td>
				<td>
					<label id="b2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td>
					<input type="password" name="a3" id="a3" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="b3"></label>
				</td>
			</tr>
			<tr>
				<td>家庭住址:</td>
				<td>
					<select>
						<option>--请选择省份--</option>
						<option>河南省</option>
					</select>
					<select>
						<option>--请选择城市--</option>
						<option>驻马店市</option>
						<option>郑州市</option>
						<option>南阳市</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center"><input type="button" value="提交" onclick="anniu()"></td>
			</tr>
		</table>
		<script type="text/javascript">
			function checkUname() {
				var reg = /^[a-zA-Z_]{6,}$/
				var username = document.getElementById("a1").value
				if (reg.test(username)) {
					document.getElementById("b1").innerHTML = "用户名格式正确"
					return true
				} else {
					document.getElementById("b1").innerHTML = "用户名格式错误"
					return false
				}
			}

			function checkpwd() {
				var reg = /^[0-9a-zA-Z_]{6,}$/
				var pwd1 = document.getElementById("a2").value
				if (reg.test(pwd1)) {
					document.getElementById("b2").innerHTML = "密码格式正确"
					return true
				} else {
					document.getElementById("b2").innerHTML = "密码格式错误"
					return false
				}
			}

			function checkEquals() {
				var a = document.getElementById("a2").value
				var b = document.getElementById("a3").value
				if (a == b) {
					document.getElementById("b3").innerHTML = "密码格式正确"
					return true
				} else {

					document.getElementById("b3").innerHTML = "密码与上不一致"
					return false
				}

			}

			function anniu() {
				if (checkUname() && checkpwd() && checkEquals()) {
					alert("验证成功")
				} else {
					alert("验证失败")
				}
			}
		</script>
		</table>
	</body>
</html>

三，利用onblur事件实现文本框中英文字母全部转换成大写，效果如下所示：

文本框中输入：

失去焦点后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		转换大写:<input type="text"  id="a1"  onblur="b()"/>
	</body>
	<script type="text/javascript">
		function b(){
			var text=document.getElementById("a1").value
			var ins=/[a-z]/
			var istext=ins.test(text)
			if(istext){
				document.getElementById("a1").value=document.getElementById("a1").value.toUpperCase()
			}else{
				alert("必须输入小写字符")
			}
		}
	</script>
	</body>
</html>