webAPI

1. API：应用程序编程接口
   Web API：浏览器提供的一套操作浏览器功能和页面元素的API
   DOM（文档对象模型）：处理可扩展标记语言的标准编程接口
   2.获取元素
   （1）利用DOM提供的方法获取

<div id="a" class="b" ></div>

document.getElementById('a');  //根据id获取元素
document.getElementsByTagName('div');  //标签名  element.getElementsByTagName('div')
//以下H5新增，IE678不兼容 
document.getElementsByClassName('b');  //类名
document.querySelector('.a');  //根据指定选择器返回第一个元素对象
document.querySelectorAll('.a');  //根据指定选择器返回全部元素对象
//特殊元素
document.body; //获取body标签
document.documentElement; //获取html标签

（2）利用节点层级关系获取

element.parentNode  //父亲节点，找不到返回null  *****重要******
element.childNodes   //所有子节点，包括元素节点，文本节点等
element.children  //所有子元素节点   *****重要******
element.children[0]  //第一个子元素节点  element.children[element.children.length-1 ]  *****重要******
element.firstChild  //第一个子节点，包括元素节点，文本节点  lastChild
element.firstElementChild  //第一个子元素节点 IE9以上才支持  element.lastElementChild
element.nextSibling  //下一个兄弟节点，包括元素节点，文本节点等
element.previousSibling  //上一个兄弟节点，包括元素节点，文本节点等
element.nextElementSibling  //下一个兄弟元素节点 IE9以上才支持
element.previousElementSibling  //上一个兄弟元素节点 IE9以上才支持

获取下一个兄弟元素节点，兼容性函数

function getNextElementSibling(element) {
    var el = element;
    while(el = el.nextSibling) {
        if(el.nodeType === 1) {
            return el;
        }
    }
    return null;
}

3.事件三要素：事件源，事件类型，事件处理程序

var btn = document.querySelector('.b')
btn.onclick = function() {
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var dates = date.getDate();
	var week = date.getDay();
	var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
	console.log(year + '年' + month + '月' + dates + '日' + arr[week])
}

4.改变标签内容
innerText：不识别标签，非标准，去除空格和换行
innerHTML：识别标签，W3C标准，保留空格和换行
表单内容通过 .value 修改，表单禁用.disabled=true

5.点击闭眼，眼睛睁开，密码框切换为文本框显示密码123；再点击睁眼，眼睛闭上，文本框切换为密码框显示●●●
算法：利用一个flag变量，判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1。

var eye = document.querySelector('.b'); //眼睛图片
var pwd = document.querySelector('.a'); //文本框、密码框
eye.onclick = function() {
	var flag = 0;
	eye.onclick = function() {
		if(flag = 0) {
			pwd.type = 'text';
			eye.src = 'img/open.png';
			flag = 1;
		}else {
			pwd.type = 'password';
			eye.src = 'img/close.png';
			flag = 0;
		}
	}
}

6.样式属性操作
element.style 行内样式，驼峰命名
element.className 类名样式

this.style.backgroundColor = 'pink';
this.className = 'change'

7.获取焦点onfocus，失去焦点onblur
8.换肤案例，点击某个图片，body背景图片就换成这个。鼠标经过表格某行，某行变色同理思路。
利用循环绑定注册事件

<ul class="ulBox"> 
	<li><img src="a.png" ></li>
	<li><img src="b.png" ></li>
	<li><img src="c.png" ></li>
</ul>
<script type="text/javascript">
	var imgs = document.querySelector('.ulBox').querySelectorAll('img'); 
	for(var i = 0; i < imgs.length; i++) {
		imgs[i].onclick = function() {
			document.body.style.backgroundImage = 'url(' + this.src + ')'
		}
	}
</script>

9.全选反选

<table border="" cellspacing="" cellpadding="">
	<thead>
		<tr>
			<th><input type="checkbox" name="" id="thAll" value="" /></th>
			<th>Header1</th>
			<th>Header2</th>
		</tr>
	</thead>
	<tbody id="tbBox">
		<tr>
			<th><input type="checkbox" name="" id="" value="" /></th>
			<td>Data1</td>
			<td>Data2</td>
		</tr>
		<tr>
			<th><input type="checkbox" name="" id="" value="" /></th>
			<td>Data1</td>
			<td>Data2</td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
	var thAll = document.getElementById('thAll');
	var tbs = document.getElementById('tbBox').getElementsByTagName('input'); 
	//全选和全不选
	thAll.onclick = function() { 
		for(var i = 0; i < tbs.length; i++) {
			tbs[i].checked = this.checked;
		}
	}
	//反选 -变量
	for(var i = 0; i < tbs.length; i++) { 
		tbs[i].onclick = function() {
			var flag = true;
			for(var i = 0; i < tbs.length; i++) {
				if(!tbs[i].checked) {
					flag = false;
					break;
				}
			}
			thAll.checked = flag
		}
	}
</script>

10.获取 / 设置 / 移除属性值

//获取属性值
element.属性  //获得内置属性值
element.getAttribute('属性')  //获得内置属性值 还可以获得自定义属性值

<div data-index="0"></div>  //H5规定自定义属性data开头  以下两种获取：
element.dataset.index  //H5新增  或者 element.dataset['index']
<div data-list-name="aaa"></div>
element.dataset.listName  //或者 element.dataset['listName']  驼峰命名

//设置属性值
element.属性 = '值' //element.className= '值'
element.setAttribute('属性','值')  //特殊 element.setAttribute('class','值')
//移除属性值
element.removeAttribute('属性')

11.tab栏切换

.item {
	display: none;
}
.item:first-child {
	display: block;
}
.current {
	color: red;
}
<div class="tab">
	<div class="tab_list">
		<ul>
			<li class="current">分类一</li>
			<li>分类二</li>
			<li>分类三</li>
		</ul>
	</div>
	<div class="tab_con">
		<div class="item">内容一</div>
		<div class="item">内容二</div>
		<div class="item">内容三</div>
	</div>
</div>
<script type="text/javascript">
	var lis = document.querySelector('.tab_list').querySelectorAll('li');
	var items = document.querySelectorAll('.item');
	for(var i = 0; i < lis.length; i++) {
		lis[i].setAttribute('index',i)
		lis[i].onclick = function() {
			for(var i = 0; i < lis.length; i++) { //排他思想
				lis[i].className = ''
			}
			this.className = 'current';
			var index = this.getAttribute('index');
			for(var i = 0; i < items.length; i++) { //排他思想
				items[i].style.display = 'none';
			}
			items[index].style.display = 'block';
		}
	}
</script>

12.创建 / 添加 / 删除节点

<ul>
    <li>123</li>
</ul>
var li = document.createElement('li') //创建元素  三种看15
var ul = document.querySelecter('ul')
ul.appendChild(li) //后面追加元素
ul.insertBefore(li,ul.children[0]) //前面追加元素
ul.removeChild(ul.children[0]) //删除元素

13.克隆节点
如果括号里为空或者false，是浅拷贝，只克隆节点本身，不克隆里面子节点
如果括号里true，是深拷贝

node.cloneNode()

14.动态创建表格

<table border="" cellspacing="" cellpadding="">
	<thead>
		<tr>
			<th>姓名</th>
			<th>科目</th>
			<th>成绩</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		
	</tbody>
</table>
<script type="text/javascript">
	var datas = [{
		name:'张三',
		subject:'js',
		score:'100'
	},{
		name:'李四',
		subject:'js',
		score:'90'
	},{
		name:'王五',
		subject:'js',
		score:'10'
	},]
	var tbody = document.querySelector('tbody');
	for(var i = 0; i < datas.length; i++) {
		var tr = document.createElement('tr');  //创建行
		tbody.appendChild(tr)
		for(var k in datas[i]) {  //创建列，遍历对象 (var k in obj)  k得到属性名，obj[k]得到属性值
			var td = document.createElement('td');
			td.innerHTML = datas[i][k]
			tr.appendChild(td)
		}  
		var td = document.createElement('td');
		td.innerHTML = '<a href="javascript;;">删除</a>'
		tr.appendChild(td)
	}
	//删除
	var as = document.querySelectorAll('a');
	for(var i = 0; i < as.length; i++) {
		as[i].onclick = function() {
			tbody.removeChild(this.parentNode.parentNode)
		}
	}
</script>

15.三种动态创建元素区别

document.write('<div>123</div>')  //几乎不用 文档流执行完，页面全部重绘
element.innerHTML('<div>123</div>')  //创建多个元素效率更高，不要拼接字符串，用数组形式拼接，结构复杂
document.creatElement('div') //创建多个元素效率低，结构清晰

innerHTML数组形式拼接

var arr = [];
for(var i = 0; i < 100; i++) {
	arr.push('<div>啦啦啦</div>')
} 
element.innerHTML = arr.join('') //数组转换成字符串，去掉，

16.总结DOM操作
（1）元素操作
创建：document.write，innerHTML，createElement
追加：appendChild，insertBefore
删：removeChild
修改：

查：

（2）属性操作
setAttribute：设置属性值
getAttribute：得到属性值
removeAttribute：移除属性
（3）事件操作
onclick 点击
onmouseover 鼠标经过
onmouseout 鼠标离开
onfocus 获得鼠标焦点
onblur 失去鼠标焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
17.注册事件78

//传统注册方式  
//利用on开头的事件  同一元素同一事件只能设置一个函数，否则后面会覆盖前一个
<buttn onclick="alert('你好')"></button>
btn.onclick=function(){}


//方法监听注册方式  
//addEventListener()方法， IE9之前不支持， 用attachEvent()代替
// 同一元素同一事件可以注册多个监器   按注册顺序依次执行
eventTarget.addEventListener(type,listener[,useCapture])
//事件类型如click，事件处理函数，可选参数（默认false）
btn[0].addEventListener('click',function(){
    alert(1)
})

17.删除、解绑事件

btn.onclick=function(){
    alert(1);
    btn.onclick = null  //传统方式
}

btn.addEventListener('click',fn)
function fn(){
    alert(1);    
    btn.removeEventListener('click',fn)
}

btn.attachListener('onclick',fn)
function fn(){
    alert(1);    
    btn.detachListener('onclick',fn)
}

18.DOM事件流 – 页面中接受事件的顺序
注意：
1、js代码中只能执行捕获或者冒泡其中一个阶段。
2、onclick和attachEvent只能得到冒泡阶段
3、eventTarget.addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序

以下事件没有冒泡：
onblur、onfocus、onmouseenter、onmouseleave

18.事件对象
div.onclick = function(event){}
事件对象包含的内容跟事件相关 ，比如鼠标点击事件包含鼠标的相关信息，鼠标坐标~
可以自定义event、e…
IE678用window.event，兼容写法：e = e || window.event

常见事件对象的属性和方法：
e.target ：返回触发事件的对象（IE678用 e.srcElement）（this返回绑定事件的对象 ）
e.currentTarget ：跟this相似，IE678不认识
e.type：返回事件类型
e.preventDefault() ：该方法阻止默认行为，如不让链接跳转（IE678用e.returnValue）
（return false 没有兼容性，但是后面的代码不执行了，只能用在传统注册方式）
e.stopPropagetion()：阻止冒泡 （Ie678用 e.cancelBubble = true ）

//兼容性写法   了解
if( e && e.stopPropagetion){
    e.stopPropagetion()
}else {
    window.event.cancelBubble = true
}

19.事件委托
原理：不是每个子节点单独设置事件监听器，而是把事件监听器设置在父节点上，利用冒泡原理影响每个子节点
比如：给ul注册点击事件，利用事件对象的Ttarget来找到当前点击的li，点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

//点击哪个li哪个li背景变粉色
ul.addEventListener('click',function(e){
    e.target.style.backgroundColor = 'pink'
})

20.鼠标事件
禁止鼠标右键菜单

document.addEventListener('contextmenu',function(e){
    e.preventDefault()
})

禁止鼠标选中—不让复制

document.addEventListener('selectstart',function(e){
    e.preventDefault()
})

鼠标事件对象
e.clientX：相对于浏览器窗口可视区的X坐标----滚动条下滑坐标也不变
e.pageX：相对于文档页面的X坐标（IE9以上）
e.screenX：相对于电脑屏幕的X坐标
案例：图片跟随鼠标移动—把最新的鼠标坐标作为top和left值

img {position:absolute}
var pic = document.querySelector('img')
document.addEventListener('mousemove',function(e){
    pic.style.left = e.pageX - 40 + 'px';
    pic.style.top = e.pageY - 40 + 'px'
})

21.键盘事件
onkeyup：按键松开时触发 ，不区分字母大小写
onkeydown：按键按下时触发
onkeypress：按键按下时触发，但不识别功能键如ctrl,shift,箭头，区分字母大小写
键盘事件对象
e.keyCode：返回改键的ASCII值

案例：按s键，光标定到搜索框里

var search = document.querySelector('input')
document.addEventListener('keyup',function(e){
    if(e.keyCode === 83) {
        search.focus()
    }
})

案例：输入内容，显示大盒子

22.BOM—浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象，核心对象window
23.window常见事件
窗口加载事件：文档内容都加载完触发

window.onload = function(){}  //只能写一次
window.addEventListener("load",function(){})  //全部加载完，包括dom元素 图片 css等
window.addEventListener("DOMContentLoaded",function(){})  //dom元素加载完，不包括图片 css等,加载速度快

调整窗口大小事件

window.onresize = function(){} 
window.addEventListener("resize",function(){
    if(window.innerWidth <= 800){    //window.innerWidth 屏幕宽度
        div.style.display = 'none'
    }
})

24.两种定时器04 00
setTimeout() 时间到了就调用一次
setInterval() 重复调用这个函数，每隔这个时间就调用一次

vae timer = setTimeout(function(){
    console.log('啦啦啦')
},2000)  //毫秒
//点击停止定时器
btn.addEventListener(click,function(){
    clearTimeout(timer)    //第二种clearInterval()
})

//调用
function fun() {
    console.log('啦啦啦')
}
setTimeout(fun,2000) 

案例：倒计时

<div class="day"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>

<script type="text/javascript">
	var day = document.querySelector('.day')
	var hour = document.querySelector('.hour')
	var minute = document.querySelector('.minute')
	var second = document.querySelector('.second')
	var inputTime = +new Date('2021-1-1 10:00:00'); // 返回的是用户输入时间总的毫秒数
	countDown();   //先调用一次，防止第一次刷新页面有空白
	setInterval(countDown,1000);
	function countDown() {
	    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
	    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
	    var d = parseInt(times / 60 / 60 / 24); // 天
	    d = d < 10 ? '0' + d : d;
		day.innerHTML = d + '天';
	    var h = parseInt(times / 60 / 60 % 24); //时
	    h = h < 10 ? '0' + h : h;
		hour.innerHTML = h + '时';
	    var m = parseInt(times / 60 % 60); // 分
	    m = m < 10 ? '0' + m : m;
		minute.innerHTML = m + '分';
	    var s = parseInt(times % 60); // 当前的秒
	    s = s < 10 ? '0' + s : s;
		second.innerHTML = s + '秒';
	}
</script>

案例：验证码60s倒计时

var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click',function() {
	btn.disabled = true;
	var timer = setInterval(function(){
		if(time == 0) {
			clearInterval(timer)
			btn.disabled = false;
			btn.innerHTML = '发送';
			time = 60;
		}else {
			btn.innerHTML = '还剩下' + time + '秒';
			time--;
		}
	},1000)
})

25.this指向问题 — 04 1907
全局作用域、普通函数、定时器 this指向window
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

26.JS执行机制
特点----单线程—同一时间只能做同一件事

JS执行机制：
1.先执行执行栈中的同步任务。
2.异步任务（回调函数）放入任务队列中。
3.执行栈中的所有同步任务执行完，系统按次序读取任务队列中的异步任务，被读取的异步任务结束等待任务，进入执行栈，开始执行。

异步任务有以下三种：
1.普通事件，click、resize
2.资源加载，load、error
3.定时器，setInterval、setTimeout

//主线程执行栈
console.log(1);
document.onclick = function(){console.log(2)}
console.log(3);
setTimeout(function(){console.log(4)},1000)

//先打印1
//点击事件交给“异步进程处理”，点击了才放入异步任务队列里
//打印3
//计时器交给“异步进程处理”，到了3s放入异步任务队列里
//点击事件没触发，打印134；3s前触发点击事件，打印1324；3s后触发点击事件，打印1342

27.location对象
http: //www.baidu.com /index.html ?name=a&age=b #link
通信协议 ----主机(域名) ---- 路径 ----------- 参数-------- 片段

location对象的属性
location.href 获取或设置整个href
location.host 返回主机（域名）
location.port 返回端口号
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段
案例：登录页输入名字，跳转到首页出现该名字

//登录页
<form action="b.html">
	用户名：<input type="text" name="uname"/>
	<input type="submit" value="登录"/>
</form>
//首页
console.log(location.search)  //?uname=aaaa
var params = location.search.substr(1);  //去掉？  
var arr = params.split('=')  // ["uname","aaaa"]
document.querySelector('.show').innerHTML = arr[1] + '欢迎你'

location.assign() 跟href一样，可以跳转页面，记录历史可以后退页面
location.replace() 替换当前页面，所以不能后退
location.reload() 重新加载页面，括号为true为强制刷新
28.navigator对象
navigator.userAgent 一般用来判断在哪个终端打开的页面
29.history对象
history.back() 后退
history.forward()前进
go(1)前进一个页面go(-1)后退一个页面

30,元素偏移量offset系列
element.offsetParent 返回带有定位的父级元素，父级元素都没有定位返回body
element.offsetTop 距离带有定位父元素上边框距离
element.offsetLeft 距离带有定位父元素左边框距离
element.offsetWidth 返回自身宽度，包括padding、边框、内容区
element.offsetHeight 返回自身高度，包括padding、边框、内容区

案例：盒子内点击，得到鼠标距离盒子左右的距离

box.addEventListener('click',function(e) {
	var x = e.pageX - this.offsetLeft   //鼠标距离顶部距离- 盒子距离顶部距离
})

案例：可以拖动的弹框

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.mask {
			display: none;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.2);
			position: fixed;
			top: 0;
			left: 0;
		}
		.popBox {
			display: none;
			width: 200px;
			height: 100px;
			background-color: #fff;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}			
		.close {
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="mask"></div><!-- 遮罩层 -->
	<div class="popBox">
		弹框
		<div class="close">X</div>
	</div>
	<div class="btn">点击弹出</div>
	
	<script type="text/javascript">
		var btn = document.querySelector(".btn")
		var mask = document.querySelector(".mask")
		var popBox = document.querySelector(".popBox")
		var close = document.querySelector(".close")
		btn.addEventListener('click',function(){
			mask.style.display = 'block'
			popBox.style.display = 'block'
		})
		close.addEventListener('click',function(){
			mask.style.display = 'none'
			popBox.style.display = 'none'
		})
		popBox.addEventListener('mousedown',function(e){
			var x = e.pageX - popBox.offsetLeft; //鼠标在盒子中的位置固定不变
			var y = e.pageY - popBox.offsetTop;
			document.addEventListener('mousemove',move)
			function move(e){
				popBox.style.left = e.pageX - x + 'px';
				popBox.style.top = e.pageY - y + 'px'
			}
			document.addEventListener('mouseup',function(){
				document.removeEventListener('mousemove',move)
			})
		})
		
	</script>
</body>
</html>

31元素可视区client系列
element.clientTop 返回元素上边框大小
element.clientLeft 返回元素左边框大小
element.clientWidth 返回自身宽度，包括padding、内容区，不含边框
element.clientHeight 返回自身高度，包括padding、内容区，不含边框

32元素滚动scroll系列
element.scrollTop 返回内容超出盒子上方的距离
element.scrollLeft 返回容超出盒子左侧的距离
element.scrollWidth 返回自身实际内容宽度(因为内容可能比盒子大 )，不含边框
element.scrollHeight 返回自身实际内容高度，不含边框

页面被卷出去距离通过window.pageYOffset

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.slide {
			display: none;
            position: fixed;
			top: 70%;
			right: 30px;
		}
		.a {
			width: 100%;
			height: 100px;
			background-color: red;
		}
		.b {
			width: 100%;
			height: 900px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="slide">
		<span>返回</span>
	</div>
	<div class="a"></div>
	<div class="b"></div>
	<script type="text/javascript">
		var slide = document.querySelector(".slide");
		var b = document.querySelector(".b");
		var bTop = b.offsetTop;  //或者a.clientHeight
		console.log(bTop)
		document.addEventListener('scroll',function(){
			if(window.pageYOffset >= bTop) {
				slide.style.display = 'block';
			}
		})
		
	</script>
</body>
</html>

33
mouseover：鼠标经过自身盒子会触发，经过子盒子还会触发，冒泡
mouseenter：只经过自身盒子触发，不会冒泡------mouseleave
34动画函数封装

盒子匀速向右移动

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	left: 0;
	top: 0;
}
function animate(obj,targect) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function() {
		if(obj.offsetLeft >= targect) {
			clearInterval(obj.timer)
		}
		obj.style.left = obj.offsetLeft + 1 + 'px'
	},30)
}
var div = document.querySelector('div');
animate(div,200)

盒子减速向右移动

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 0;
			top: 30;
		}
	</style>
</head>
<body>
    <button class="btn8" type="button">目标800</button>
	<button class="btn4" type="button">目标400</button>
	<div></div>
	<script type="text/javascript">
		function animate(obj,target) {
			clearInterval(obj.timer)
			obj.timer = setInterval(function() {
				var step = (target - obj.offsetLeft) / 10; //公式：（目标值-目前位置）/10
				step = step > 0 ? Math.ceil(step) : Math.floor(step)
				if(obj.offsetLeft == target) {
					clearInterval(obj.timer)
				}
				obj.style.left = obj.offsetLeft + step + 'px'
			},30)
		}
		var div = document.querySelector('div');
		var btn8 = document.querySelector('.btn8');
		var btn4 = document.querySelector('.btn4');
		
	    btn8.addEventListener('click',function(){
			animate(div,800)
		})
		btn4.addEventListener('click',function(){
			animate(div,400)
		})
	</script>
</body>
</html>

动画函数添加回调函数：
回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里，当那个函数执行完后，再执行传进去的这个函数，这个过程叫回调。
如：盒子停到800位置后变红

function animate(obj,target,callback) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function() {
		var step = (target - obj.offsetLeft) / 10; 
		step = step > 0 ? Math.ceil(step) : Math.floor(step)
		if(obj.offsetLeft == target) {
			clearInterval(obj.timer);
			if(callback) {
				callback()
			}
		}
		obj.style.left = obj.offsetLeft + step + 'px'
	},30)
}
var div = document.querySelector('div');
var btn8 = document.querySelector('.btn8');
var btn4 = document.querySelector('.btn4');

   btn8.addEventListener('click',function(){
	animate(div,800)
})
btn4.addEventListener('click',function(){
	animate(div,400,function() {
		div.style.backgroundColor = 'red';
	})
})

34 轮播图 6 47
35 移动端常见特效 63
(1)touchstart手指触摸DOM元素事件：
touches对象：正在触摸屏幕的所有手指的列表
targetTouches：正在触摸当前Dom元素的手指列表，e.targetTouches[0]得到第一个手指相关信息
changedTouches：手指状态发生了改变的列表，从无到有/从有到无
(2)touchmove手指在DOM元素上移动事件：
(3)touchstart手指离开DOM元素事件：
changedTouches
拖动元素：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript">
		//手指移动距离=手指当前距离-手指初始距离
		//盒子移动后位置=盒子初始位置+手指移动距离
		var div = document.querySelector("div");
		var startX = 0;  //手指初始距离
		var startY = 0;
		var x = 0;  //盒子初始位置
		var y = 0;
		div.addEventListener('touchstart',function(e){
			x = this.offsetLeft;
			y = this.offsetTop;
			startX = e.targetTouches[0].pageX;
			startY = e.targetTouches[0].pageY;
		})
		div.addEventListener('touchmove',function(e){
			var moveX = e.targetTouches[0].pageX - startX;
			var moveY = e.targetTouches[0].pageY - startY;
			this.style.left = x + moveX + 'px';
			this.style.top = y + moveY + 'px';
			e.preventDefault(); //阻止屏幕滚动的默认行为 
		})
	</script>
</body>
</html>	 

轮播图滑动 8
移动端click事件会有300ms延时，原因是移动端双击会缩放页面，解决：
(1)禁止缩放

<meta name="viewport" content="user-scalable=no">

(2)利用touch事件自己封装这个事件解决300ms延迟
(3)用fastclick插件76
36 常用插件：
Swiper轮播图
Superslide各种组件，TouchSlide移动端
iscroll移动端滚动
zy-media.js移动视频插件

37 本地存储 85
本地存储特性：
(1)数据存储在浏览器中
(2)设置读取方便
(3)容量大，sessionStorage约5M，localStorage约20M
(4)只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage
(1)生命周期为关闭浏览器窗口
(2)在同一个页面下数据可以共享
(3)以键值对的形式存储
存储数据：sessionStorage.setItem(‘key’,value) （存储命名，存储的值）
获取数据：sessionStorage.setItem(‘key’)
删除数据：sessionStorage.removeItem(‘key’)
清楚所有数据：sessionStorage.clear()

window.localStorage
(1)生命周期永久生效
(2)同一个浏览器中多个页面可以共享
(3)以键值对的形式存储
案例：记住用户名