定时器作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器:
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
语法
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
倒计时
var oDiv = document.getElementById('div1');
functiontimeLeft(){
//实际开发中此时间从服务器获取,避免客户端调整时间
var now = newDate();
var future = newDate(2018,5,20,16,30,20);
// alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
var milli = parseInt((future-now)/1000);
//活动当天页面下线,避免倒计时到点后继续计负时
// if(milli <= 0){
// //页面跳转,不执行下面的代码了
//window.location.href = "http://www.baidu.com";
// }
var day = parseInt(milli/86400);
var hour = parseInt(milli%86400/3600);
var minute = parseInt(((milli%86400)%3600)/60);
var second = milli%60;
oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有'+day+'天'+toDouble(hour)+'时'+toDouble(minute)+'分'+toDouble(second)+'秒';
}
timeLeft();
setInterval(timeLeft,1000);
}
functiontoDouble(num){
if( num < 10){
return '0' + num;
}else{
return num;
}
}
定时器制作时钟
<script type = "text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function timego(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+'
'+todou(hour)+':'+todou(minute)+':'+todou(second);
oDiv.innerHTML = str;
}
timego();
setInterval(timego,1000);
}
function toweek(n){
if(n==0) {
return '星期日';
} else if(n==1) {
return '星期一';
} else if(n==2) {
return '星期二';
} else if(n==3) {
return '星期三';
} else if(n==4) {
return '星期四';
} else if(n==5) {
return '星期五';
} else {
return '星期六';
}
}
function todou(n){
if(n<10) {
return '0'+n;
} else {
return n;
}
}
</script>
.....
.<divid="div1"></div>