po主比较懒，昨天出去玩耍，所以前天的笔记没有来得及整理。现在发上来吧。
这一章主要是关于计时器的学习，其中包括set Interval与setTimeout，以及利用这两个方法实现的一些动画小案例。
话不多说，直接上笔记
1.定时器
1.1 通过js，我们有能力做到在一个设定的时间间隔之后来执行一段程序，而不是在函数调用之后立即执行，我们称之为计时事件
1.2 定时器就是在指定时间间隔后来执行函数。
setTimeout：setTimeout(参数1,参数2);延时调用，只执行一次
参数1：函数、函数名称；
参数2：指定时间（单位是毫秒）1s==1000ms
function print(){console.log("打印了")}
setTimeout(print,1000);
setInterval：setInterval(参数1,参数2);重复执行
参数1：函数、函数名称；
参数2：指定时间，单位是毫秒，1s===1000ms
function print(){console.log("打印了")}
var timer = setInterval(print,1000);
停止计时器
clearInterval(timer);
1.3 关于计时器的小练习，可以参考W3C
2.封装使用ID获取标签的方法###
包括但不局限于ID的封装，前面的笔记中有一个关于利用class属性来获取指定标签的封装，有需要的童鞋也可以去看看。
封装：function $(id){return document.getElementById(id)};
使用：var box = $("box");
3.动画###
3.1 定时器在使用之前必须先停止计时器
3.2 匀速动画
利用计时器改变目标标签的位置，以步长为属性进行累加直到目标标签达到指定位置
CSS代码：
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: #000;
}
HTML代码：
JS代码：
function $(id){return document.getElementById(id);}
var btn = $("btn"),div = $("box");
var step = 0,target = 600,timer = null;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
step+=2;
if(step>=600){
step=600;
clearInterval(timer);
}
div.style.marginLeft=step+"px";
},10)
}
3.3 减速动画
运动学公式
var leader = 0;
var target = 600;
var sport = (target - leader) / 10;
leader = leader+sport; //leader+=sport;
在上面的代码中，我们如果打印一下sport的值，将会发现sport是一个由大逐渐变小的过程。就达到了减速动画的效果。下面我们来看一段demo：
CSS代码：
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: greenyellow;
}
HTML代码：
JS代码：
function $(id){return document.getElementById(id);}
var btn = $("btn"),box = $("box");
var target = 600,leader = 0,timer =null;
btn.onclick= function () {
clearInterval(timer);
timer = setInterval(function () {
if(Math.round(leader)==600){
clearInterval(timer);
leader=600;
}
leader+=(target-leader)/50;
box.style.marginLeft = leader+"px";
},30);
}
当然，细心的童鞋已经发现了，虽然leader的值虽然无限接近于我们的目标值target，但由于每次目标值减去运动的值再除以十，就不可能会得到目标值，所以我们会陷入一个无限循环的步骤中，那么我们就对leader进行四舍五入操作，当他接近目标值时就直接对其四舍五入等于目标值，那么运动到此为止就可以结束了。大家可以自己尝试一下哟。
4. Math对象###
4.1 Math.round(); //对小数进行四舍五入操作
4.2 Math.random()*10; //随机产生一个0到10之间的浮点数，不包括10
5. 小米广告/窗帘效果
又是一个练手的demo，就不那么多废话了。直接看一下缩写版的操作步骤吧。
布局
鼠标放入box后img的位置的计算
鼠标移出后停止位置的改变
出现诡异情况时，请清空计时器
改变位置时的步长
CSS代码：
*{
margin: 0;
padding: 0;
}
div{
width: 512px;
height: 400px;
border: 1px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 100px auto;
overflow: hidden;
position: relative;
}
div span{
position: absolute;
left:0;
width:100%;
height:200px;
cursor: pointer;
}
div span:nth-of-type(1){
top:0;
/*background: red;*/
}
div span:nth-of-type(2){
top:200px;
/*background: blue;*/
}
div img{
position: absolute;
top:0;
left:0;
}
HTML代码：
JS代码：
var img = document.getElementsByTagName("img")[0];
var box = document.getElementsByTagName("div")[0];
var spanTop = document.getElementsByTagName("span")[0];
var spanBottom = document.getElementsByTagName("span")[1];
var timer = null;
var leader = 0;
// console.log( leader > -parseInt(img.offsetHeight - box.offsetHeight));
//鼠标位于广告图上半部分时
spanTop.onmouseover= function () {
clearInterval(timer);
timer = setInterval(function () {
// console.log(leader);
if(leader > -parseInt(img.offsetHeight - box.offsetHeight)){
leader-=1;
}
else{
leader = -(parseInt(img.offsetHeight - box.offsetHeight));
clearInterval(timer);
}
img.style.top=leader+"px";
},3);
};
spanTop.onmouseout= function () {
clearInterval(timer);
};
//鼠标位于广告图下半部分时
spanBottom.onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
if(leader<0)leader+=1;
else {
leader=0;
clearInterval(timer);
}
img.style.top=leader+"px";
},3)
};
spanBottom.onmouseout = function () {
clearInterval(timer);
};
orz,时隔两天再看自己的代码，惨不忍睹，冗余太多。书写的也很差劲，后面会多写代码提升自己代码的可阅读性。
6. 倒计时跳转页面###
页面提示：将在几秒后跳转到某个页面，几是一直变化的值
利用到window对象的location属性
window.location.href = "http://www.baidu.com/"
页面将在5s后跳转至百度