7.JavaScript计时器、cookies与创建对象方法 - SentralLiu

公告

1.JavaScript定时器

定义定时器：

setInterval('调用函数',毫秒时间)：每间隔固定毫秒值就执行一次函数

setTimeout('调用函数',毫秒时间)：在固定时间之后执行一次调用函数

关闭定时器：

clearInterval(定时器名称)

clearTimeout(定时器名称)

		<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>
	<body>
		<h1>3</h1>
	</body>

2.cookies

简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。cookie

是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个

cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

Cookie可以做什么？

1，保存用户的登录状态

2，定制页面，如换肤，选择所在地区等等

3，购物车的实现

4，记录用户的浏览历史记录

Cookie的缺点：

1，cookie可能被禁用

2，cookie是与游览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的

3，cookie可能被删除，因为cookie实际就是硬盘上的一个文件

4，cookie的安全性不够高，所有的cookie都是以纯文本的形式记录于文件中。

设置cookie

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：

document.cookie="userId=888";

如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：

document.cookie="userId=888; userName=1601";

获取cookie

下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：

var strCookie=document.cookie;

为cookie设置过期时间

在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：

document.cookie="userId=828; expires=GMT_String";

例如：

date.setTime(date.getTime()+expiresDaysx24x1000x3600);

document.cookie="userId=888; userName=1601; expires="+date.toGMTString();

换肤cookies案例**

<!--外部样式引入 -->
		<link rel="stylesheet" type="text/css" id="style"/>

	<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.创建对象的补充

		<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>

posted on 2021-11-26 20:52 SentralLiu 阅读(55) 评论(0) 收藏举报

刷新页面返回顶部