[javascript]定时器的应用
开启定时器
-setInterval(元素,毫秒) 间隔型
-setTimeout(元素,毫秒) 延时型
停止定时器
-clearInterval(元素)
-clearTimeout(元素)
简单数码时钟的实现
<script> function toDou(n){ if(n<10){ return '0'+n; } else{ return ''+n; } } window.onload = function(){ var aImg = document.getElementsByTagName('img'); function tick(){ var odate = new Date(); var str = toDou(odate.getHours())+toDou(odate.getMinutes())+toDou(odate.getSeconds()); for(var i=0;i<aImg.length;i++){ aImg[i].src = 'img/'+str.charAt(i)+'.png'; //charAt为使字符串兼容IE } } setInterval(tick,1000); tick(); } </script> <body> <img src="img/1.png"/> <img src="img/1.png"/> : <img src="img/1.png"/> <img src="img/1.png"/> : <img src="img/1.png"/> <img src="img/1.png"/> </body>
获取时间的其他元素
-getFullYear 获取年
-getMonth 获取月份 //月份从0开始,应加1
-getDate 获取日期
-getDay 获取星期 //0代表周日
延时提示框
<style> div{float:left;margin:5px;} #div1{width:50px;height:50px;background:red;} #div2{width:250px;height:150px;background:#CCC;display:none;} </style> <script> window.onload =function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; oDiv1.onmouseover = oDiv2.onmouseover = function(){ oDiv2.style.display = 'block'; clearTimeout(timer); } oDiv1.onmouseout = oDiv2.onmouseout = function(){ timer = setInterval(function(){oDiv2.style.display = 'none';},500); } } </script> <body> <div id = "div1"></div> <div id = "div2"></div> </body>
无缝滚动
-offsetLeft 获取物体的左边距 //好处是可以综合考虑所有影响这个物体的因素之后得出一个结论
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> *{margin:0;padding:0;} #div1{width:712px;height:108px;margin:0 auto;position:relative;background:red;overflow:hidden;} #div1 ul{position:absolute;top:0;left:0;} #div1 ul li{float:left;width:178px;height:108px;list-style:none;} </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var a = document.getElementsByTagName('a'); var speed = -2; oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length+'px'; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left = '0';}; if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/2+'px'; } oUl.style.left = oUl.offsetLeft+speed+'px'; } var timer=setInterval(move,30) oDiv.onmouseover = function(){ clearInterval(timer); } oDiv.onmouseout = function(){ timer=setInterval(move,30); } a[0].onclick = function(){ speed = -2; } a[1].onclick = function(){ speed = 2; } } </script> </head> <body> <a href="javascript:;">向左走</a> <a href="javascript:;">向右走</a> <div id = "div1" > <ul> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> </ul> </div> </body> </html>