2021.5.7 js学习第八天

最新推荐文章于 2022-03-22 20:23:18 发布

景抓马

最新推荐文章于 2022-03-22 20:23:18 发布

阅读量102

点赞数

分类专栏： Java Script

原文链接：https://blog.csdn.net/m0_55689351/article/details/115014233

版权

Java Script 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javascript 中的 BOM 对象

浏览器对象模型–Browser Object Model (BOM)

在这里插入图片描述

主要的对象属于 window 对象中的内容。
window 对象我们不需要手动创建，是一个内置的对象，我们只管使用。

window 对象中的属性

确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）

window 对象中的函数
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

close() 方法用于关闭浏览器窗口。

关于弹框的函数

警告框:window.alert("sometext");

确认框:window.confirm("sometext");

提示框:window.prompt("sometext","defaultvalue");

window 对象中的子对象

screen–屏幕对象
location–页面的地址对象
history–历史对象
navigator–浏览器信息对象

window 对象中的属性

确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）有 2 种方法

1. 对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari 使用

window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度

2. 对于 Internet Explorer 8、7、6、5 使用

document.documentElement.clientHeight - 浏览器窗口的内部高度 document.documentElement.clientWidth - 浏览器窗口的内部宽度

或者

document.body.clientHeight - 浏览器窗口的内部高度
document.body.clientWidth - 浏览器窗口的内部宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window 对象中的属性</title>
		<script>
			window.onload=function(){
				//window.innerHeight - 浏览器窗口的内部高度 
				//window.innerWidth - 浏览器窗口的内部宽度
				//document.documentElement.clientHeight - 浏览器窗口的内部高度 
				//document.documentElement.clientWidth - 浏览器窗口的内部宽度
				//document.body.clientHeight - 浏览器窗口的内部高度 
				//document.body.clientWidth - 浏览器窗口的内部宽度
				var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				document.write("<h1>"+h+"*"+w+"</h1>");
				
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

window 对象中的函数

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

pen() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式:window.open(URL,name,features,replace)

参数 1-URL:要在新窗口中显示的文档的地址[可选的字符串].

没有 url[1.不写 2.空字符串]—窗口依然打开，只是没有内容

参数 2–name:新窗口的名称.

可以用作标记 <a>和 <form> 的属性 target 的值.

如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

参数 3-features:新窗口要显示的标准浏览器的特征【尺寸】

如果省略该参数，新窗口将具有所有标准特征。

参数 4-replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目.

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

close() 方法用于关闭浏览器窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window 对象中的函数</title>
		<script>
			window.onload=function(){
				var but1=document.getElementById("but1");
				but1.onclick=function(){
					//window.open("https://www.baidu.com","baidu","width:300px,height:300px",false;)
					window.open("01.shuxing .html","shuxing",false);
				}
				var but2=document.getElementById("but2");
				but2.onclick=function(){
					window.close();
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="open()" />
		<br />
		<input id="but2" type="button" value="close()" />
	</body>
</html>

关于弹框的函数

1.警告框:window.alert("sometext");

2.确认框:window.confirm("sometext");

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

3.提示框:window.prompt("sometext","defaultvalue");

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值.如果用户点击取消，那么返回值为 null。

参数 1—提示信息

参数 2—提示框的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于弹框的函数</title>
		<script>
			window.onload=function(){
				//1.警告框:window.alert("sometext");
				var but1=document.getElementById("but1");
				but1.onclick=function(){
					window.alert("警示框");
					
				}
				//2.确认框:window.confirm("sometext");
				var but2=document.getElementById("but2");
				but2.onclick=function(){
					var flag=window.confirm("确定要退出吗 ");
					if(flag){
						window.close();
					
					}
				}
				//3.提示框:window.prompt("sometext","defaultvalue");
				var but3=document.getElementById("but3");
				but3.onclick=function(){
					var res=window.prompt("请输入","");
					alert(res);
					if(res!=null){
						but3.value=res;
					}
				}
			}
		</script>
	</head>
	<body>
		<input  id="but1" type="button" value="警示框"/> <br>
		<input  id="but2" type="button" value="确认框"/> <br>
		<input  id="but3" type="button" value="提示框"/>
	</body>
</html>

window 对象中的子对象–[screen–屏幕对象]

window.screen 对象包含有关用户屏幕的信息

总宽度和总高度 — width / height
可用宽度和可用高度----availWidth / availHeight
色彩深度----colorDepth
色彩分辨率—pixelDepth

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>screen--屏幕对象</title>
		<script>
			window.onload=function(){
				//1. 总宽度和总高度 --- width / height
				var w=window.screen.width;
				var h=window.screen.height;
				document.write("<h1>总宽度和总高度"+w+"*"+h+"</h1>")
				//2. 可用宽度和可用高度----availWidth / availHeight
				var aw=window.screen.availWidth;
				var ah=window.screen.availHeight;
				document.write("<h1>可用宽度和可用高度"+aw+"*"+ah+"</h1>")
				//3. 色彩深度----colorDepth
				var col=window.screen.colorDepth;
				
				document.write("<h1>色彩深度"+col+"</h1>")
				//4. 色彩分辨率---pixelDepth
				var pix=window.screen.pixelDepth;
				document.write("<h1>色彩分辨率"+pix+"</h1>")
			}
		</script>
	</head>
	<body>
	</body>
</html>

window 对象中的子对象–[location–页面的地址对象]

href 属性返回当前页面的 URL。
在这里插入图片描述

search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location--页面的地址对象</title>
		<script>
			window.onload=function(){
				var but=document.getElementById("but");
				but.onclick=function(){
					var test1=document.getElementById("test1");
					var test2=document.getElementById("test2");
					var name=test1.value;
					var pass=test2.value;
					if(name=="zhangsan" || pass=="12345"){
						window.location.href="06.demo.html?ursename="+name+"&Password="+pass;
						
					}else{
						window.location.href="05.location .html";
					}
				}
			}
		</script>
	</head>
	<body>
		<input id="test1" type="text " name="ursename" /> <br />
		<input id="test2" type="text " name="password"/> <br />
		<input id="but" type="button" value="登录"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录成功</title>
		<script>
			window.onload=function(){
				var urfhref=window.location.href;
				//search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之 后的部分）。
				var urfsearch=window.location.search;
				//?ursename=zhangsan&Password=123456
				
				var strarray=urfsearch.split("&");
				//strarray[0]==?ursename=zhangsan
				//strarray[1]==Password=123456
				for(var strarrayindex in strarray){
					var strinof=strarray[strarrayindex].split("=");
					//strarray[0]==strinof[0]==?ursename
					//strarray[0]==strinof[1]==zhangsan
					strarray[1]==strinof[0]==Password
					strarray[1]==strinof[1]==123456
					if(strinof[0]=="?ursename"){
						var domarray=document.getElementsByTagName("h1");
						domarray[0].innerHTML=strinof[1]+",登陆成功!";
					}
				}
				//alert(strarray[1]);
				
			}
		</script>
	</head>
	<body>
		<h1>登录成功</h1>
	</body>
</html>

window 对象中的子对象–[history–历史对象]

back() - 与在浏览器点击后退按钮相同

forward() - 与在浏览器中点击按钮向前相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var but1=document.getElementById("but1");
				but1.onclick=function(){
					//back() - 与在浏览器点击后退按钮相同
					//forward() - 与在浏览器中点击按钮向前相同
					window.history.forward();
				}
			}
		</script>
	</head>
	<body>
		<h1>测试第一个页面</h1>
		<a href="09.test2 .html">测试第二个页面</a>
		<input id="but1" type="button" value="下一步" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		window.onload=function(){
			var but1=document.getElementById("but1");
			but1.onclick=function(){
				//back() - 与在浏览器点击后退按钮相同
				//forward() - 与在浏览器中点击按钮向前相同
				window.history.forward();
			}
			var but2=document.getElementById("but2");
			but2.onclick=function(){
				window.history.back();
			}
		}
		</script>
	</head>
	<body>
		<h1>history--测试第二个页面</h1>
		
		<a href="07.history .html">测试第三个页面</a>
		<input id="but1" type="button" value="下一步" />
		<input id="but2" type="button" value="上一步" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history--历史对象</title>
		<script>
		window.onload=function(){
			var but1=document.getElementById("but1");
			but1.onclick=function(){
				//back() - 与在浏览器点击后退按钮相同
				//forward() - 与在浏览器中点击按钮向前相同
				window.history.back();
			}
		}
		</script>
	<body>
		
		<h1>测试第三个页面</h1>
		<input id="but1" type="button" value="上一步" />
	</body>
</html>

window 对象中的子对象–[navigator–浏览器的信息对象]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>navigator-浏览器的信息对象</title>
		<script>
			window.onload=function(){
				document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>"); 
				document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>"); 
				document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
				document.write("<h1>启用 Cookies:"+window.navigator.cookieEnabled+"</h1>");
				document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
				document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
				document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Javascript 中的计时函数

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setInterval(“function”,milliseconds)- 间隔指定的毫秒数不停地执行指定的代码。

参数 1–function–被间隔执行的动作

参数 2–milliseconds–间隔时间【毫秒数】

clearInterval(intervalVariable)方法用于停止 setInterval() 方法执行的函数代码。

参数 intervalVariable--- setInterval()的返回值。

setTimeout(“function”,milliseconds)暂停指定的毫秒数后执行指定的代码.

参数 1–指定运行的代码

参数 2–指定的毫秒数

clearTimeout(timeoutVariable) 方法用于停止执行 setTimeout()方法的函数代码。

参数 timeoutVariable----setTimeout 方法的返回值。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript 中的计时函数</title>
		<script>
			var returnval=null;//保存setInterval返回值
			window.onload=function(){
				var but1=document.getElementById("but1");
				
				but1.onclick=function(){
					var harrat=document.getElementsByTagName("h1");
					
					function getDate(){
						var date1=new Date();
						var y=date1.getFullYear();
						var m=date1.getMonth();
						var date=date1.getDate();
						var hours=date1.getHours();
						var min=date1.getMinutes();
						var s=date1.getSeconds();
						var time=y+"年"+m+"月"+date+"日"+hours+":"+min+":"+s+"秒";
						harrat[0].innerHTML=time;
					}
					returnval=setInterval(function(){getDate();},1000);
					returnval=setTimeout(function(){
						getDate();
					},
						1000);
				}
			}
			
			function testkeydown(event){
				if(event.keyCode==40){
					//停止
					clearInterval(returnval);
					//clearTimeout(returnval);
				}
			}
		
		</script>
	</head>
	<body onkeydown="testkeydown(event);">
		<h1>  </h1>
		<input id="but1" type="button" value="开始" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>闪灯</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				display:block ;
			}
			
		</style>
		<script>
			window.onload=function(){
				var divdom=document.getElementById('div1');
				var flag=true;
				function display_div(){
					if(flag){
						divdom.style.display="block";
						flag=false;
					}else{
						divdom.style.display="none";
						flag=true;
					}
				};
				setInterval(function(){display_div();},50);
			}
		</script>
	</head>
	<body>
		<center>
			<div id="div1"></div>
		</center>
	</body>
</html>

景抓马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.5.7 js学习第八天

javascript 中的 BOM 对象浏览器对象模型–Browser Object Model (BOM)主要的对象属于 window 对象中的内容。window 对象我们不需要手动创建，是一个内置的对象，我们只管使用。window 对象中的属性确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）window 对象中的函数open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口close() 方法用于关闭浏览器窗口。关于弹框的函数警告框:window.a
复制链接

扫一扫

专栏目录