Java程序猿必学第三十四篇——JS(JavaScript)BOM

最新推荐文章于 2024-11-08 16:09:18 发布
键盘敲烂@
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量115
点赞数
分类专栏：程序员的“自我修养” 文章标签： javascript chrome css
本文链接：https://blog.csdn.net/m0_62718093/article/details/121568049
版权
程序员的“自我修养” 专栏收录该内容
35 篇文章 0 订阅
订阅专栏
1. window操作
   1.1 window对象
     <script>
		/* BOM： 浏览器对象模型，有了BOM，使得js有能力与浏览器进行交互
			     浏览器中主要通过window对象来操作js的代码
			js中所有内容都属于window，通过window可以调任意内容，包括document，console等对象     
		* */
		var a = "abc"; 
		window.document.write(window.a.length);  //全局变量属于window
		document.write(window.a.toUpperCase());
		window.console.log(window.a.toUpperCase());
		console.log(window.parseInt("123"));
		window.onload=function(){
			window.alert("hello");
		}
	</script>


  1.2 window尺寸
 	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.write("内部宽度："+window.innerWidth+"<br />");
			document.write("内部高度："+window.innerHeight+"<br />");
			
			document.write("body宽度："+window.document.body.clientWidth+"<br />");
			document.write("body高度："+window.document.body.clientHeight+"<br />");
			
			document.write("屏幕宽度："+window.screen.availWidth+"<br />");
			document.write("屏幕高度："+window.screen.availHeight+"<br />");
		</script>
	</head>



  1.3 location跳转
   <head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* location:定位，可以拿到浏览器的路径信息，也可以赋值跳转到指定页面 */
			
			/*  取值  */
			/*
			document.write(window.location+"<br />");
			document.write(window.location.protocol+"<br />");
			document.write(window.location.host+"<br />");
			document.write(window.location.pathname+"<br />");
			document.write(window.location.port+"<br />");
			document.write(window.location.href+"<br />");
			*/
			
			/* 赋值--页面跳转 */
			//window.location="http://www.baidu.com";
			//window.location.assign("http://www.baidu.com");
			
			alert("页面重新加载（刷新）...");
			location.reload();  //用在函数体中
		</script>
	</head>


  1.4 history
	<body>
		<!-- history：用于前进，后退，与刷新操作；与浏览器的控件对应 -->
		<a href="04_history_2.html">进入最美页面</a><br />
		<input type="button" value="后退" onclick="history.back()" />
		<input type="button" value="前进" onclick="window.history.forward()" />
		<input type="button" value="刷新" onclick="location.reload()"/>
	</body>


	<body>
		<a href="04_history_1.html">我就是最美页面</a><br />
		<input type="button" value="后退2" onclick="history.go(-1)"/>
		<input type="button" value="前进2" onclick="history.go(1)"/>
		<input type="button" value="刷新2" onclick="history.go(0)"/>
		
		
		<div id="example"></div>
		<script>
			var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
			txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
			txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
			txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
			txt+= "<p>硬件平台: " + navigator.platform + "</p>";
			txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
			txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
			document.getElementById("example").innerHTML=txt;
		</script> 
		
	</body>


2. 定时器（重点）
  2.1 一次性定时器	
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 定时器： 设置定时时间，当到达了，则触发执行相关代码 
			 有两种： 1.一次性定时器
			      2.循环定时器（常用） 、
		-->
		<script>
			//一次性定时器setTimeout： 参数1：函数体   参数2：间隔时间
			var timerId;
			onload=function(){
				timerId = window.setTimeout(function(){
					alert("吓死宝宝了~");
				},3000);
			}
			
			function clearBtn(){
				clearTimeout(timerId);  /* 清除定时器 */
			}
		</script>
	</head>
	<body>
		<input type="button" value="取消定时器" onclick="clearBtn()" />
	</body>


  2.2 循环定时器（常用）
 	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 循环定时器： 一直持续循环执行触发的代码 */
			var timerId;
			onload=function(){
				timerId = setInterval(function(){
					alert("一直循环定时器");
				},3000);
			}
			
			function clearBtn(){
				clearInterval(timerId);
			}
		</script>
	</head>
	<body>
		<input type="button" value="取消定时器" onclick="clearBtn()" />
	</body>


2.3 定时跳转
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*案例： 3,2,1 跳转到百度页面 
			  分析：使用定时器，每隔一秒改变h1的内容
			 * */
			var timerId;
			var index=3;
			onload=function(){
				var h1 = document.getElementsByTagName("h1")[0];
				timerId = setInterval(function(){
					index--;
					if(index>0){ //3,2,1能看到改变内容
						h1.innerHTML=index;
					}else{
						location.href="http://www.baidu.com"; //跳转
						clearInterval(timerId);  //清除定时器
					}
				},1000)
			}
		</script>
	</head>
	<body>
		<h1>3</h1>
	</body>


  2.4 时钟效果
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 案例：做一个时钟的效果  13:22:23
			   分析： 在循环定时器中，每隔一秒显示时间即可
			 * */
			onload=function(){
				var h1 = document.getElementsByTagName("h1")[0];
				setInterval(function(){
					var date = new Date();
					var hour = date.getHours();
					if(hour<10){
						hour = "0"+hour;
					}
					var minu = date.getMinutes();
					if(minu<10){
						minu = "0"+minu;
					}
					var sec  = date.getSeconds();
					if(sec<10){
						sec = "0"+sec;
					}
					var sum = hour+":"+minu+":"+sec;
					h1.innerHTML=sum;
				},1000);
			}
		</script>
	</head>
	<body>
		<h1></h1>
	</body>


  2.5 定时切换图片
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//案例： 图片定时切换
			//分析：使用定时器，在定时器中执行图片的切换，路径使用数组存储
			var a = ["../img/002.png","../img/003.png","../img/004.png","../img/005.png"];
			var index = 0;
			onload=function(){
				var img = document.getElementsByTagName("img")[0];
				setInterval(function(){
					index++;
					if(index==a.length){ //到达最后的下标，则跳会第一张
						index=0;
					}
					img.src=a[index];
					
				},1000);
			}
		</script>
	</head>
	<body>
		<img src="../img/002.png" />
	</body>



3. Cookie(重点)
  3.1 cookie基本应用
  	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* cookie： 数据以键值对形式存储到客户端磁盘文件的方式  
			   应用场景：
			   1.浏览历史记录
			   2.记录登录账户（非重要账户，如果重要的，可以只记录用户名）
			   3.购物车信息
			   
			 弊端：
			   1.不安全，磁盘文件，容易被删除
			   2.未加密，容易被窃取数据
			   3.不能跨浏览器
			   4.容易被禁用
			   
			cookie的使用：
			   1.设置cookie
			   2.获取cookie
			   3.清除cookie
			 * */
			
			function setCookie(){
				alert("设置cookie成功！");
				//document.cookie = "username=zsf";  //设置cookie
				
				//设置cookie的有效期:expires=xxx
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24);  //时间单位为毫秒
				document.cookie="username=zsf;expires="+date.toGMTString();
			}
			
			function getCookie(){
				alert(document.cookie);  //获取cookie
			}
			
			function clearCookie(){
				alert("清除cookie！");
				var date = new Date();
				document.cookie="username=xxx;expires="+date.toGMTString();
			}
		</script>
	</head>
	<body>
		<input type="button" value="设置cookie" onclick="setCookie()" />
		<input type="button" value="获取cookie" onclick="getCookie()"/>
		<input type="button" value="清除cookie" onclick="clearCookie()"/>
	</body>


  3.2 换肤功能
	<head>
		<meta charset="UTF-8">
		<title></title>

        <!--外部样式引入 -->
		<link rel="stylesheet" type="text/css" id="style"/>
	</head>
	<body>
		<!-- 案例：页面上有很多标签，有两个按钮，一个点击变红，一个点击变绿 
			分析： 1.先写上标签  2.通过js事件变色，在js中调用css外部样式
			    3.获取link标签对象，调用href属性
		-->
		
		<input type="button" value="变红" onclick="red()" />
		<input type="button" value="变绿" onclick="green()" /><br />
		
		<p>孩儿立志出乡关</p>
		<p>学不成名誓不还</p>
		<div>埋骨何须桑梓地</div>
		<h2>人生何处不青山</h2>
	
		<script>
			var link = document.getElementById("style");
			function red(){
				link.href="../css/red.css";
			}
			
			function green(){
				link.href="../css/green.css";
			}
		</script>
	</body>


  3.3 换肤Cookie
  	<head>
		<meta charset="UTF-8">
		<title></title>

        <!--外部样式引入 -->
		<link rel="stylesheet" type="text/css" id="style"/>
	</head>
	<body>
		<!-- 案例：页面上有很多标签，有两个按钮，一个点击变红，一个点击变绿 
			 升级： 记录最后一次点击的颜色效果
			分析： 1.点击变色时，设置cookie
			    2.在页面加载完成后，获取cookie，取出记录的值
		-->
		
		<input type="button" value="变红" onclick="red()" />
		<input type="button" value="变绿" onclick="green()" />
		<input type="button" value="清除颜色" onclick="clearBtn()" /><br />
		
		<p>孩儿立志出乡关</p>
		<p>学不成名誓不还</p>
		<div>埋骨何须桑梓地</div>
		<h2>人生何处不青山</h2>
	
		<script>
			var link = document.getElementById("style");
			function red(){
				link.href="../css/red.css";
				
				//设置cookie
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24);
				document.cookie="color=red;expires="+date.toGMTString();
			}
			
			function green(){
				link.href="../css/green.css";
				
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24);
				document.cookie="color=green;expires="+date.toGMTString();
				
			}
			
			function clearBtn(){
				alert("清除成功！");
				link.href="";  //清除页面显示颜色
				
				//清除cookie
				var date = new Date();
				date.setTime(date.getTime());
				document.cookie="color=xxx;expires="+date.toGMTString();
			}
			
			onload=function(){
				//获取cookie
				var cookie = document.cookie;  //“color=red;key=value”;
				debugger
				if(cookie){ //只有获取到cookie，才进行拆分，并取到颜色效果
					var strColor = cookie.split(";")[0];
					var key = strColor.split("=")[0];
					var value = strColor.split("=")[1];
					if(key=="color"){
						link.href="../css/"+value+".css";
					}
				}
				
			}
		</script>
	</body>



  3.4 创建对象的补充
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/* 创建对象方式： 1.使用json数据： {name:'zs',age:30}
			 * 此外还有以下方式：
			 * 2. new Object()方式
			 */
			var st = new Object();
			/* 对象赋值 */
			st.name = "fengjie";
			st.age  = 18;
			/* 对象取值 */
			document.write(st.name+"--"+st.age+"<br />");
			
			//3.构造器方式
			var student = new Student("zsf",80);
			document.write(student.name+"=="+student.age);
			
			function Student(name,age){
				this.name = name;  //给构造器属性赋值
				this.age  = age;
			}
			
		</script>
	</head>