JavaScript定时器常见用法实例分析

本文实例讲述了JavaScript定时器常见用法。分享给大家供大家参考，具体如下：定时器定时

本文实例讲述了JavaScript定时器常见用法。分享给大家供大家参考，具体如下：

定时器

定时器在javascript中的作用

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!');
}

课堂练习

1、定时器制作移动动画 2、定时器制作无缝滚动 3、定时器制作时钟

<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>
......
<div id="div1"></div>

4、定时器制作倒计时

<script type="text/javascript">
 window.onload = function(){
 var oDiv = document.getElementById('div1');
 function timeleft(){
 var now = new Date();
 var future = new Date(2016,8,12,24,0,0);
 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 = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
 oDiv.innerHTML = str; 
 }
 timeleft();
 setInterval(timeleft,1000); 
 }
</script>
......
<div id="div1"></div>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。