JS鼠标事件

攒星.

已于 2022-09-28 08:51:21 修改

阅读量245

点赞数

文章标签： javascript

于 2022-09-28 08:14:23 首次发布

本文链接：https://blog.csdn.net/weixin_67358175/article/details/127081962

版权

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建一个按钮并赋予id -->
		<input type="button" id="btn" value="打开02.html" />
		<script type="text/javascript">
			// 创建一个鼠标点击事件，使用location跳转到本地2.html
			document.getElementById("btn").onclick = function() {
				location.assign("2.html")
			}
		</script>
	</body>

</html>

<!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="打开03.html" />
		<input type="button" id="btn3" value="forward" />
		<input type="button" id="btn4" value="go" />
		<script type="text/javascript">
			// 使用history历史事件，back代表返回上一个打开过的历史事件
			document.getElementById("btn1").onclick = function() {
				history.back()
			}
			//使用location跳转到本地3.html
			document.getElementById("btn2").onclick = function() {
				location.assign("3.html")
			}
			// 使用history历史事件，forward代表打开下一个打开过的历史事件
			document.getElementById("btn3").onclick = function() {
				history.forward()
			}
			//使用history历史事件，go中的数字为负的则是返回上n个页面，为正时则打开下n个页面
			// nd代表go中数字的大小
			document.getElementById("btn4").onclick = function() {
				history.go(1)
			}
		</script>
	</body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建按钮进行鼠标点击事件 -->
		<input type="button" id="btn2" value="返回02.html" />
		<input type="button" id="btn3" value="go" />
		<script type="text/javascript">
			//使用location跳转到本地2.html
			document.getElementById("btn2").onclick = function() {
				location.assign("2.html")
			}
			//使用history历史事件，go中的数字为负的则是返回上n个页面，为正时则打开下n个页面
			// nd代表go中数字的大小
			document.getElementById("btn3").onclick = function() {
				history.go(-1)
			}
		</script>
	</body>

</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>账户:</td>
				<td>
					<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="msg1"></label>
				</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td>
					<input type="password" name="pwd1" id="pwd1" value="" onblur="checkpwd()" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td>
					<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="msg3"></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,}$/
				// 声明一个变量储存上方html中id为uname的值
				var username = document.getElementById("uname").value
				/* 使用正则表达式对username中的值进行判断结果为true则返回true
					为false则返回false */
				if (reg.test(username)) {
					document.getElementById("msg1").innerHTML = "用户名格式正确"
					return true
				} else {
					document.getElementById("msg1").innerHTML = "用户名格式错误"
					return false
				}
			}
			//失去焦点事件
			function checkpwd() {
				// 声明一个正则表达式
				var reg = /^[0-9a-zA-Z_]{6,}$/
				// 声明一个变量储存上方html中id为pwd1的值
				var pwd1 = document.getElementById("pwd1").value
				/* 使用正则表达式对pwd1中的值进行判断结果为true则返回true
					为false则返回false */
				if (reg.test(pwd1)) {
					document.getElementById("msg2").innerHTML = "密码格式正确"
					return true
				} else {
					document.getElementById("msg2").innerHTML = "密码格式错误"
					return false
				}
			}
			//失去焦点事件
			function checkEquals() {
				// 声明两个变量分别储存上方html中id为pwd1，pwd2中的值
				var a = document.getElementById("pwd1").value
				var b = document.getElementById("pwd2").value
				// 对这两个值进行判断，若相等则返回true，若不相等则返回false
				if (a == b) {
					document.getElementById("msg3").innerHTML = "密码格式正确"
					return true
				} else {
					document.getElementById("msg3").innerHTML = "密码与上不一致"
					return false
				}

			}
			// 鼠标点击事件
			function anniu() {
				// 如果以上返回的全部为true时则验证成功
				if (checkUname() && checkpwd() && checkEquals()) {
					alert("验证成功")
				} 
				// 返回为false时则验证失败
				else {
					alert("验证失败")
				}
			}
		</script>
	</body>
</html>

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 创建一个文本框并赋予失去焦点事件 -->
		转换大写:<input type="text"  id="text1"  onblur="t()"/>
	</body>
	<script type="text/javascript">
		function t(){
			//声明一个变量储存上方html中id为text1的值
			var text=document.getElementById("text1").value
			console.log(text)
			//创建一个正则表达式
			var ins=/^[a-z]{1,}$/
			// 使用正则表达式与text中的值进行判断若为true时则把小写改为大写
			if(ins.test(text)){
			document.getElementById("text1").value=document.getElementById("text1").value.toUpperCase()
			}
			// 若为fals时则返回弹出框
			else{
				alert("必须输入小写字符")
			}
		}
	</script>
</html>