DOM学习-20180906

今日学习一点DOM；
###Web Storage###
一、作用
使浏览器在客户端运行时，可以存储部分程序数据。

二、种类（两种）

1、Session Storage
含义；基于Session的Web Storage。

保存数据期限与Session的期限相同

Session期限=endTime-startTime
startTime;第一次访问某网站的时刻
endTime;用户关闭浏览器（或离开该网站）的时刻

2、Local Session
含义；数据保存在用户的磁盘的Web Storage。

保存期限较长，除非用户（或程序显示地）清除这些数据。

3、Session Storage与Local Session区别
二者的功能和用法基本相同，只是存储期限不同。

三、Storage接口的用法

属性	含义
storage.length:	返回Storage里保存了多少组key-value对

方法	含义
storage.key(index);	返回第index个key。
storage.getItem(key);	key对应的value。
storage.set(key,value);	存入指定key-value对
storage.removeItem(key);	删除key指定的key-value对
storage.clear();	删除所有key-value对

四、存储与读取数据

<body>
	<div>
<!-----------------创建文本框，输入数据内容--------------------->
		<input type="text" id="input"/>
<!-----------------创建复选框，询问是否保存输入内容--------------------->
		使用Local Storage保存：<input type="checkbox" id="local"/><br/>
<!---------------创建按钮键，触发提交需要保存的输入内容------------------>
		<input type="button" value="保存数据" onclick="saveStorage('input');"/><br/>
<!----------------创建按钮键，触发输出已经保存的输入内容----------------->	
		<input type="button" value="读取数据" onclick="loadStorage('show');"/>
	</div>
<!----------------创建div，显示已经保存的输入内容的--------------------->	
	<div id="show"></div>	
	
	<script type="text/javascript">
//--------------------------------存储事件--------------------------	
		function saveStorage(id){
			//判断是否勾选了复选框，结果存储在checked中。
			var checked = document.getElementById("local").checked;
			// 使用何种方式读取数据，结果存储在storage中。
			var storage = checked ? localStorage : sessionStorage;
			// 获取id名为input的数据，结果存储在target中。
			var target = document.getElementById(id);
			// 保存数据，保存在key名为message的key-value对中。
			storage.setItem("message" , target.value);
		}
//--------------------------------读取事件--------------------------			
		function loadStorage(id){		
			//判断是否勾选了复选框，结果存储在checked中。
			var checked = document.getElementById("local").checked;	
			// 使用何种方式读取数据，结果存储在storage中。
			var storage = checked ? localStorage : sessionStorage;	
			// 获取id为show的节点。并存储在节点名为target中。
			var target = document.getElementById(id);
			// 输出数据，把key名为message的value值输出。
			target.innerHTML = storage.getItem("message");
		}
	</script>
</body>

###定时、延时事件###
一、定时事件

window.setInterval(fuction(){
		功能语句（当前事件）;
	},间隔时间)

二、延时事件
注意；延时事件只执行一次

window.setTimeout(fuction(){
		功能语句（只执行一次当前事件）;
	},延时时间)

三、间断定时事件

//创建一个变量，来接收定时事件。
var ds=window.setInterval(fuction(){功能语句（当前事件）;},间隔时间)
//延时间断定时事件。
window.setTimeout(function(){window.clearInterval(ds)},间隔时间)

四、轮播图
1、隐藏法样式

.show{
display:block;
}
.hidden{
display:none;
}

2、使用document.getElementsByClassName(“类名”)

var imgs=document.getElementsByClassName("photo");

3、定时事件

var lbt=window.setInterval(functin(){},间隔事件);

4、改变属性

img[j].setAtttibute("class","photo show")

5、清除定时事件

window.clearInterval(lbt);

猜你喜欢