您的位置：首页 > Web前端 > JavaScript

[javascript]定时器的应用

2015-11-24 17:04 375 查看

开启定时器

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航