定时器的使用
定时器的作用
setInterval 间隔型
setTimeout 延时型
function show(){
alert('a');
}
setInterval(show,1000); //间隔型，每隔1秒输出
setTimeout(show,1000); //延时型，延时1秒后输出
/*定时器与延时器的例子*/
window.onload=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;
oBtn1.onclick=function(){
timer=setInterval(function(){ //setInterval实际上有返回值,返回值为所打开的定时器
alert('定时器执行中')
},2000);
};
oBtn2.onclick=function(){
clearInterval(timer); //关闭选定定时器
//clearTimeout(timer) //关闭选定延时器
alert('定时器关闭')
};
}
数码时钟
获取时间系统：
Date对象（日期对象，获取现在的日期时间）
getHours，getMinutes，getSeconds
显示系统时间：
字符串连接
空位补零
设置图片路径
charAt方法
/*数码时钟*/
function toDou(n)
{//用来给时分秒中的个位数添加0
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img'); //获取所有的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函数为的是解决兼容问题
}
}
setInterval(tick,1000); //间隔一秒
tick(); //tick立刻执行
}
Date对象的其他方法
var oDate = new Date();
alert(oDate.getFullYear()); //获取年份
alert(oDate.getMonth()+1); //js中的获取月份始终比当前月份小1,因此获取时要+1
alert(oDate.getDate()); //获取日
alert(oDate.getDay()); //获取星期(0：日，1：一，2：二，3：三，4：四，5：五，6：六)
延时提示框
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover=function(){
clearTimeout(timer); //消除oDiv2的定时器,防止从oDiv2移入oDiv1时,oDiv2消失
oDiv2.style.display='block'; //显示oDiv2
};
oDiv1.onmouseout=function(){
timer=setTimeout(function(){ //鼠标移出oDiv1时,oDiv2会消失,所以设定一个延时器
oDiv2.style.display='none'; //隐藏oDiv2
},500)
};
oDiv2.onmouseover=function(){
clearTimeout(timer); //鼠标移入oDiv2,关闭延时器,防止oDiv2在500ms后消失
};
oDiv2.onmouseout=function(){
timer=setTimeout(function(){ //设定定时器,防止缓慢移出oDiv2时oDiv2消失
oDiv2.style.display='none'; //鼠标移出oDiv2,oDiv2消失
},500)
};
}
/*简化版*/
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover=oDiv2.onmouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv1.onmouseout=oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none';
},500)
};
}
无缝滚动
效果原理
让ul一直往某个方向移动
复制li
innerHTML和+=
修改ul的width
滚动过界后，重设位置
判断过界
无缝滚动——扩展
改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开始定时器
<!--无缝滚动-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#div1{ 712px;height: 108px;margin: 100px auto;position: relative;overflow: hidden;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li {float: left; 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 timer=null;
var speed=-2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //滚动链表ul长度等于每个li宽度*li个数
//无缝滚动
function move() {
//向左滚动
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
//当oUl滑过一半时,将oUl的left置0,相当于往回拖一半
}
//向右滚动
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
//当oUl滑过到头时,将oUl的left置为负oUl宽度的一半,相当于回到oUl的中间
}
oUl.style.left=oUl.offsetLeft+speed+'px';
//定时器每隔30ms将ul的left减2px,实现向左滚动
}
timer=setInterval(move,30);
//鼠标移入暂停,移出继续滚动
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
};
//左右滚动切换
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
};
};
</script>
</head>
<body>
<a >左</a>
<a >右</a>
<div id="div1">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
</body>
</html>