定时器类型及语法

• setTimeout 只执行一次的定时器
• clearTimeout 关闭执行一次的定时器
• setInterval 反复执行的定时器
• clearInterval 关闭反复执行的定时器

简单用法：

//定时器调用函数，并给定时器命名
var time1 = setTimeout(myalert,2000); 
var time2 = setInterval(myalert,2000);
//停止指定定时器
clearTimeout(time1);
clearInterval(time2);
function myalert(){
 alert('ok!');
}
//简写（匿名函数代替即可）
var time1 = setTimeout(
 function(){
 alert('ok!');
 },2000);

实用的例子：

1、 动态显示当前时间

效果图：

<script type="text/javascript">
 window.onload = function(){ 
 var oDiv = document.getElementById('div1');
 function timego(){
 var now = new Date();
 var year = now.getFullYear();
 //0-11月
 var month = now.getMonth()+1;
 var date = now.getDate();
 //0-6周，0是周日
 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);
 //修改div内容为str
 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 '星期六';
 }
 }
 //时分秒小于10的加‘0’
 function todou(n){
 if(n<10)
 {
 return '0'+n;
 }
 else
 {
 return n;
 }
 }
</script>
......
<div id="div1"></div>

2、倒计时

效果图：

<script type="text/javascript">
 window.onload = function(){
 var oDiv = document.getElementById('div1');
 function timeleft(){
 var now = new Date();
 //月份要减1
 var future = new Date(2019,0,1,24,0,0);
 //parseInt取整
 var lefts = parseInt((future-now)/1000); 
 var day = parseInt(lefts/86400);
 var hour = parseInt(lefts%86400/3600);
 var min = parseInt(lefts%86400%3600/60);
 var sec = lefts%60;
 str = '距离2019年1月1日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
 //修改div内容为str
 oDiv.innerHTML = str; 
 }
 timeleft();
 setInterval(timeleft,1000); 
 }
</script>