javaScript_10 11-25

最新推荐文章于 2022-12-13 13:44:21 发布

weixin_44907496

最新推荐文章于 2022-12-13 13:44:21 发布

阅读量57

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44907496/article/details/110127668

版权

JavaScript_10

1.JavaScript中的BOM对象

浏览器对象模型–Browser ObjectModel (BOM)
Window 对象
属性
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window对象-属性</title>
	<script>
		window.onload=function(){
			var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
			var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
			window.alert(w+"*"+h);
		}
	</script>
</head>
<body>
	
</body>
</html>

在这里插入图片描述
方法
其他方法：open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

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


URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 < a> 和 < form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window对象-方法</title>
	<script>
		function open_win(){
			window.open("https://www.baidu.com/");
		}
		function open_aboutblank(){
			window.open("about:blank","空白页","width=300,height=300",false);
		}
	</script>
</head>
<body>
	<input type="button" value="OPen百度" onclick="open_win()"><br>
	<input type="button" value="about:blank" onclick="open_aboutblank()"><br>
</body>
</html>

在这里插入图片描述
重要事项：请不要混淆方法 Window.open() 与方法 **Document.open()，**这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。
close() 方法用于关闭浏览器窗口。
说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window对象-close方法</title>
	<script>
		var myWindow=null;
		window.onload=function(){
			myWindow=window.open("about:blank","","width=300,height=300");
			myWindow.document.write("This is 'myWindow'");
		}
		function closeWin(){
			myWindow.close();
		}
	</script>
</head>
<body>
	<input type="button" value="close 'myWindow'" onclick="closeWin()">
</body>
</html>

在这里插入图片描述
JavaScript 弹窗方法
在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
1. 警告框:window.alert(“sometext”);
2. 确认框:window.confirm(“sometext”);
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
3. 提示框:window.prompt(“sometext”,“defaultvalue”);
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
参数1—提示信息
参数2—提示框的默认值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>winidow-弹窗方法</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
	<script>
		window.onload=function(){
			var butobj=document.getElementById('but1');
			butobj.onclick=function(){
				var val=window.confirm("确定要删除吗？");
				if(val){
					var divobj=document.getElementById("div1");
					var hobj=document.getElementById("h");
					divobj.removeChild(hobj);
				}
			}
			var butobj1=document.getElementById("but2");
			butobj1.onclick=function(){
				var val=window.prompt("请输入姓名","");
				if(val.length>0){
					alert(val);
				}else{
					alert("不能为空");
				}
			}
		}
	</script>
</head>
<body>
	<div id="div1">
		<h1 id="h">测试确认框</h1>
	</div>
	<input type="button" id="but1" value="删除H1">
	<input type="button" id="but2" value="测试提示框">
</body>
</html>

在这里插入图片描述

子对象

1.Window Screen–屏幕
window.screen 对象包含有关用户屏幕的信息。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window screen---屏幕</title>
	<script>
		window.document.write("<h3>总宽度和总高度："+window.screen.width+"*"+window.screen.height+"</h3>");
		window.document.write("<h3>可用宽度和可用高度："+window.screen.availWidth+"*"+window.screen.availHeight+"</h3>");
		window.document.write("<h3>色彩深度："+window.screen.colorDepth+"</h3>");
		window.document.write("<h3>色彩分辨率："+window.screen.pixelDepth+"</h3>");
	</script>
</head>
<body>
	
</body>
</html>

在这里插入图片描述
2.Window Location—页面的地址 (URL)
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window location--页面的地址</title>
	<script>
		document.write("<h3>href:"+window.location.href+"</h1>");
		document.write("<h3>href:"+window.location.pathname+"</h1>");
		document.write("<h3>href:"+window.location.search+"</h1>");
	</script>
</head>
<body>
	
</body>
</html>

在这里插入图片描述
用户登录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登陆</title>
	<script>
		window.onload=function(){
			var but1=document.getElementById('but1');
			var username=document.getElementById("text1");
			var password=document.getElementById("text2");
			var span1=document.getElementById("span1");
			but1.onclick=function(){
				var usernamevalue=username.value;
				var passwordvalue=password.value;
				if(usernamevalue=="zhangsan" && passwordvalue=="123456"){
					window.location.href="javascript_bom-success.html?username="+usernamevalue;
				}else{
					span1.innerHTML="<font color='red'>用户名或密码错误！</font>";
				}
			}
				username.onfocus=function(){
					span1.innerHTML="";
					username.value="";
					password.value="";
				
			}
		}
	</script>
</head>
<body>
	<center>
		<table border="1px">
			<tr align="center">
				<td colspan="2">
					<h1>用户登录</h1>
					<span id="span1"></span>
				</td>
			</tr>
			<tr align="center">
				<td>用户名：</td>
				<td><input type="text" id="text1" name="username"></td>
			</tr>
			<tr align="center">
				<td>密码：</td>
				<td><input type="password" id="text2" name="password"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input type="button" value="用户登录" id="but1"></td>
			</tr>
		</table>
	</center>
</body>
</html>

在这里插入图片描述
登录成功

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登陆成功</title>
	<script>
		window.onload=function(){
			var searchvalue=window.location.search;
			if(searchvalue.length<=0){
				window.location.href="javascript_bom-window6.html"
			}else{
				var username=searchvalue.split("=")[1];
				var hobj=document.getElementById('h');

				hobj.innerHTML="欢迎，"+username+"登陆成功！";
			}
		}
	</script>
</head>
<body>
	<center>
		<h1 id="h">欢迎，登陆成功！</h1>
	</center>
</body>
</html>

在这里插入图片描述

weixin_44907496

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript_10 11-25

JavaScript_101.JavaScript中的BOM对象浏览器对象模型–Browser ObjectModel (BOM)Window 对象属性有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 8
复制链接

扫一扫