JavaScript定时器常见用法实例分析
本文实例讲述了JavaScript定时器常见用法。分享给大家供大家参考,具体如下:
定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
/* 定时器: setTimeout只执行一次的定时器 clearTimeout关闭只执行一次的定时器 setInterval反复执行的定时器 clearInterval关闭反复执行的定时器 */ vartime1=setTimeout(myalert,2000); vartime2=setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ functionmyalert(){ alert('ok!'); }
课堂练习
1、定时器制作移动动画
2、定时器制作无缝滚动
3、定时器制作时钟
window.onload=function(){ varoDiv=document.getElementById('div1'); functiontimego(){ varnow=newDate(); varyear=now.getFullYear(); varmonth=now.getMonth()+1; vardate=now.getDate(); varweek=now.getDay(); varhour=now.getHours(); varminute=now.getMinutes(); varsecond=now.getSeconds(); varstr='当前时间是:'+year+'年'+month+'月'+date+'日'+toweek(week)+''+todou(hour)+':'+todou(minute)+':'+todou(second); oDiv.innerHTML=str; } timego(); setInterval(timego,1000); } functiontoweek(n){ if(n==0) { return'星期日'; } elseif(n==1) { return'星期一'; } elseif(n==2) { return'星期二'; } elseif(n==3) { return'星期三'; } elseif(n==4) { return'星期四'; } elseif(n==5) { return'星期五'; } else { return'星期六'; } } functiontodou(n){ if(n<10) { return'0'+n; } else { returnn; } } ......
4、定时器制作倒计时
window.onload=function(){ varoDiv=document.getElementById('div1'); functiontimeleft(){ varnow=newDate(); varfuture=newDate(2016,8,12,24,0,0); varlefts=parseInt((future-now)/1000); varday=parseInt(lefts/86400); varhour=parseInt(lefts%86400/3600); varmin=parseInt(lefts%86400%3600/60); varsec=lefts%60; str='距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; oDiv.innerHTML=str; } timeleft(); setInterval(timeleft,1000); } ......
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。