JavaScript基础总结-10

其他 2021-03-04 13:05:33 阅读次数: 0

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>
	<head>
		<meta charset="utf-8">
		<title></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> 和 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。		 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_win(){
     
     
				window.open("https://www.baidu.com/");
			}
			function open_aboutblank(){
     
     
				window.open("about:blank","空白页","width=200,height=100",false);
			}
		</script>
	</head>
	<body>
		<input type=button value="Open百度" onclick="open_win()" /><br>
		<input type=button value="about:blank" onclick="open_aboutblank()" />
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var myWindow=null;
			
			window.onload=function(){
     
     
				myWindow=window.open("about:blank","","width=200,height=100");
				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 中创建三种消息框：警告框、确认框、提示框。
        警告框:window.alert("sometext");
        确认框:window.confirm("sometext");
        当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
        当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。
        提示框:window.prompt("sometext","defaultvalue");
        当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
        如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
        参数1—提示信息
        参数2—提示框的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
     
     
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
		<script>
			window.onload=function(){
     
     
				var butObj=document.getElementById("but1");
				butObj.onclick=function(){
     
     
					//window.alert("测试警告框");
					var val=window.confirm("确定要删除吗?");
					if(val){
     
     
						var divObj=document.getElementById("div1");
						var hObj=document.getElementById("h");
						divObj.removeChild(hObj);
					}
				}
				
				var butObj2=document.getElementById("but2");
				butObj2.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 id="but1" type="button" value="删除H1" /><br>
		<input id="but2" type="button" value="测试提示框" />
	</body>
</html>

在这里插入图片描述

      子对象
       1.Window Screen–屏幕
          window.screen 对象包含有关用户屏幕的信息。
         1.总宽度和总高度 — screen.width / screen.height
         2.可用宽度和可用高度----screen.availWidth / screen.availHeight
         3.色彩深度----screen.colorDepth
         4.色彩分辨率----screen.pixelDepth

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.总宽度和总高度  --- screen.width   /  screen.height
			window.document.write("<h1>总宽度和总高度:"+window.screen.width+
			"*"+window.screen.height+"</h1>");
			//2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
			window.document.write("<h1>可用宽度和可用高度:"+window.screen.availWidth+
			"*"+window.screen.availHeight+"</h1>");
			//3.色彩深度----screen.colorDepth
			window.document.write("<h1>色彩深度:"+window.screen.colorDepth+"</h1>");
			//3.色彩分辨率----screen.pixelDepth
			window.document.write("<h1>色彩分辨率:"+window.screen.colorDepth+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			document.write("<h1>href:"+window.location.href+"</h1>");
			document.write("<h1>pathname :"+window.location.pathname +"</h1>");
			document.write("<h1>search :"+window.location.search+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

      实例:

<!DOCTYPE html>
<html>
	<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("pass1");
				var span=document.getElementById("span");
				but1.onclick=function(){
     
     
					var usernamevalue=username.value;
					var passwordvalue=password.value;
					if(usernamevalue=="zhangsan" && passwordvalue=="123456"){
     
     
						//跳转到成功的页面，传递用户名
						window.location.href="success.html?username="+usernamevalue;
					}else{
     
     
						//给出错误提示
						span.innerHTML="<font color='red'>用户名密码错误!</font>";
					}
				}
				//为用户名输入框添加聚焦事件
				username.onfocus=function(){
     
     
					span.innerHTML="";
					username.value="";
					password.value="";
				}
			}
		</script>
	</head>
	<body>
		<center>
		<table border="1px">
			<tr align="center">
				<td colspan="2">
					<h1>用户登录</h1>
					<span id="span"></span>
				</td>
			</tr>
			<tr align="center">
				<td>用户名:</td>
				<td><input id="text1" type="text" name="username"></td>
			</tr>
			<tr align="center">
				<td>密码:</td>
				<td><input id="pass1" type="password" name="password"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input id="but1" type="button" value="用户登录" /></td>
			</tr>
		</table>
		</center>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
     
     
				var searchvalue=window.location.search;
				if(searchvalue.length<=0){
     
     
					window.location.href="login.html";
				}else{
     
     
				    //searchvalue===?username=zhangsan
					//var strarray=searchvalue.split("=");
					//var username=strarray[1];
					var username=searchvalue.split("=")[1];
					var h1obj=document.getElementById("h1");
					h1obj.innerHTML="欢迎，"+username+"登录成功!";
				}
			}
		</script>
	</head>
	<body>
		<center>
			<h1 id="h1">欢迎，登录成功!</h1>
		</center>
	</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_49935332/article/details/110127262
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022