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

 

posted @ 2015-11-24 17:04  takochan  阅读(155)  评论(0)    收藏  举报