setInterval与setTimeout的用法
定时器是我们在工作中经常用到的一些方法，比如轮播图、弹窗、倒计时等场景，定时器是window的方法，所以this指向的一定是window（这是需要注意的)。
一个普通的倒计时方法：
<!--普通定时器倒计时-->
<div class="timer"></div>
<script>
window.onload=function() {
var div = document.getElementsByClassName('timer')[0];
//定义一个时间差函数
function time() {
//结束的时间
var target = new Date('2018-11-26 13:01:00');
//当前时间
var now = new Date();//不传值默认取当前时间
var ms = target - now;
//将获得的时间差(毫米单位),先将时间差转为秒（除以1000），再根据时间制获取值时分秒
var h = Math.floor(ms / 1000 / 3600);
h = h < 10 ? '0' + h : h;
var m = Math.floor((ms / 1000) % 3600 / 60);
m = m < 10 ? '0' + m : m;
var s = Math.floor((ms / 1000) % 60);
s = s < 10 ? '0' + s : s;
var res = h + ':' + m + ':' + s;
//将时间放在div内显示
div.innerHTML = res;
if(ms<1000){//最后1秒
clearInterval(timer);
timer=null;
}
}
//定义一个定时器
var timer = setInterval(time, 1000);
}
注意，当倒计时为最后1秒时，就要清除定时器，否则定时器会多走一次。
一个普通的弹出动画定时器案例：
<style>
.animate {
width: 180px;
height: 200px;
background: #07bbff;
position: fixed;
right: 0;
bottom: -200px;
}
</style>
<body>
<div class="animate">
<span onclick="hide()">关闭</span>
</div>
<script>
//思路：出现时一个定时器，隐藏时一个定时器，过5秒后一个周期定时器
var div=document.getElementsByClassName('animate')[0];
var span=div.getElementsByTagName('span')[0];
//获取div盒子的外联样式方法：
var cssStyle=window.getComputedStyle(div,null);
//出现事件
function moveUp(){
//2s内完成 间隔时间为100ms,则需要20次，每次移动10px
//获取div的bottom并转为数字，用于计算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=0){
bottom+=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
}
}
//隐藏事件
function moveDown(){
//2s内完成 间隔时间为100ms,则需要20次，每次移动10px
//获取div的bottom并转为数字，用于计算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=-200){
bottom-=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
//消失后5秒在此出现
timer2=setTimeout(function(){
timer=setInterval(moveUp,100);
},5000);
}
}
var timer=null;
var timer2=null;
//页面加载完成时出现
window.onload=function(){
timer=setInterval(mouveUp,100);
}
//点击时消失
function hide(){
//做一个判断，避免在出现时进行点击,同时阻止事件冒泡
event.stopPropagation();
var bottom=parseInt(cssStyle.bottom);
if(bottom==0){
timer=setInterval(moveDown,100);
}
}
</script>
</body>
一个验证码定时器：
<button id="btn" onclick="timeDown()">点击获取验证码</button>
<script>
var btn=document.getElementById('btn');
//倒计时时间
var sec=30;
function time(){
//消除定时器的界定都是1秒的时候
if(sec>1){
sec--;
sec=sec<10?'0'+sec:sec;
btn.innerHTML=sec+'s后重新获取';
//禁止倒计时时点击
btn.removeAttribute('onclick');
btn.style.cursor='not-allowed';
}else{
clearInterval(timer);
timer=null;
//重新倒计时
btn.setAttribute('onclick','timeDown()');
btn.style.cursor='pointer';
sec=30;
}
}
var timer=null;
//点击时倒计时
function timeDown(){
timer=setInterval(time,1000);
}
</script>
注意，在使用onclick属性时需要防止事件冒泡！！