初学JavaScript第七天

এ᭄༊空旧黎梦ღꦿ࿐

已于 2022-09-28 19:04:45 修改

阅读量265

点赞数

分类专栏：初学者JavaScript 文章标签：前端 html

于 2022-09-26 18:41:43 首次发布

本文链接：https://blog.csdn.net/weixin_70675726/article/details/127058360

版权

初学者JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

history对象

back（） 加载列表中上一个url（页面）

forward（） 加载列表中下一个url（页面）

go（“url”，or number） 加载列表中的一个url或要求浏览器移动指定方向的页面数

ps（back相当于后退按钮 forwad相当于前进按钮 go（1）代表前进一页等价于forward方法 go（-1）代表后退一页，等价于back方法）

location对象

host 检索位置或者url的主机端口号

hostnae 检索位置或者url的主机名部分

href 检索完整的url字符串

assign（ “”） 加载url指定的新的html文档

reload（） 重新加载当前页

replace（“url”） 替换文档

例题

三个页面之间的跳转

01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn" value="打开02.html" />
		<script type="text/javascript">
			btn.onclick=function(){
				location.href="02.html"
			}
		</script>
	</body>
</html>

02.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn" value="back" />
		<input type="button" name="" id="btn1" value="打开03.html" />
		<input type="button" name="" id="btn2" value="forward()" />
		<input type="button" name="" id="btn3" value="go" />
		<script type="text/javascript">
			btn.onclick=function(){
				history.back()
			}
			btn1.onclick=function(){
				location.href="03.html"
			}
			btn2.onclick=function(){
				history.forward()
			}
			btn3.onclick=function(){
				history.go(1)
			}
		</script>
	</body>
</html>

03.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn" value="返回02.html" />
		<input type="button" name="" id="btn1" value="go" />
		<script type="text/javascript">
			btn.onclick=function(){
				location.href="02.html"
			}
			btn1.onclick=function(){
				history.go(-1)
			}
		</script>
	</body>
</html>

鼠标点击事件

onmousedown 按下鼠标键
onmousemove 移动鼠标
onmouseout 鼠标离开某一个网页对象
onmouseover   鼠标移动到某一个网页对象上
onmouseup   松开鼠标键
onclick   单击鼠标键
ondblclick   双击鼠标键
onkeydown 按下一个键
onkeyup 松开一个键
onkeypress 按下然后松开一个键

例题：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="0" 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 name="province" id="province" onchange="changeOpt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="四川省">--四川省--</option>
						<select>
							<select name="cities" id="cities">
								<option value="请选择城市">--请选择城市--</option>
								<select>
				</td>
				<td>

				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" />
				</td>
			</tr>
		</table>
		<div id="result">

		</div>

		<script type="text/javascript">
			function checkUname(){
			var seg = /^[a-zA-Z]{6,}$/
			var usname = document.getElementById("uname").value
			if (seg.test(usname)) {
				msg1.innerHTML = "用户名正确"
				return true
			} else {
				msg1.innerHTML = "用户名不正确"
				return false
			}
			}
			function  checkPwd(){
				var reg1=/^[0-9a-zA-Z]{6,}$/
			var spwd=	document.getElementById("pwd1").value
			if(reg1.test(spwd)){
				msg2.innerHTML="密码正确"
				return true
			}else {
				msg2.innerHTML="密码不正确"
				return false
			}
			
			}
			function  checkEquals(){
			var spwd	=document.getElementById("pwd1").value
			var spwd2=	document.getElementById("pwd2").value
			if(spwd2==spwd){
				msg3.innerHTML="正确"
				return ture
			}
			else{
				msg3.innerHTML="不正确"
				return false
			}
			}
		</script>
	</body>
</html>