js-定时器

定时器

定时器在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!');}

定时器制作时钟

<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>

定时器制作倒计时

<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>