js特效系列-1定时器的使用
定时器的使用：setInterval与setTimeout的区别
setInterval(函数,时间间隔) 每隔一段时间执行一下函数动作，且如果不关闭定时器将一直执行下去
setTimeout(函数,时间间隔) 隔一段时间执行一下函数动作，不过只执行一次。一次过后将不再执行。
如：
setInterval(function(){
alert("a");
},1000) 每隔一秒会弹出alert("a")
setTimeout(function(){
alert("a");
},1000) 过一秒后会弹出alert("a") 但弹出之后将不再弹出。也就是说setTimeout只执行一次做延迟操作。
案例：时间图片滚动特效：
<body>
<div id="test" >
<img src="images/1.png" />
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
<img src="images/5.png" />
</div>
<script type="text/javascript">
//该函数用于时分秒做处理，未满十在前面自动加0
function trans(value){
if(value<10){
return "0"+value;
}else{
return ""+value;
}
}
function time(){
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
//var string="114125";
var string=trans(hours)+trans(minutes)+trans(seconds);
var images=document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){
images[i].src="images/"+string[i]+".png";
}
}
setInterval(time,1000);
//调用time()函数解决页面加载时显示本地时间问题
time();
</script>
</body>
clearInterval（setInterval句柄）与clearTimeout(setTimeout句柄)函数分别用于清除设置的定时器
charAt方法得到字符串指定索引的值：string="absc" ; string.charAt(1)得到的是b
案例：setTimeout与clearTimeout的使用
延时效果
<html>
<head>
<title>argument的使用</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#div1{
width:100px;
height:50px;
background:blue;
float:left;
margin-right:20px;
}
#div2{
width:200px;
height:100px;
background:red;
float:left;
display:none;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<script type="text/javascript">
//移动div1时div2显示出来，并延时显示，移出div2后消失
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var time=null;
oDiv1.onmouseover=function(){
clearTimeout(time);
oDiv2.style.display="block";
}
oDiv1.onmouseout=function(){
// 鼠标移动来的时候 延时0.5秒消失
time=setTimeout(function(){
oDiv2.style.display="none";
},500);
}
oDiv2.onmouseover=function(){
//清除定时器，也就是让display为block
clearTimeout(time);
}
oDiv2.onmouseout=function(){
//设置定时器使display为none
time=setTimeout(function(){
oDiv2.style.display="none";
},500);
}
</script>
</body>
</html>
案例：图片无缝滚动 offsetLeft/offsetTop/offsetWidth/offsetHeight
offsetLeft为左边距
<html>
<head>
<title>无缝轮播特效</title>
<meta http-equiv="Content-Type" content="charset=utf-8"/>
<style type="text/css">
#div1{
margin:50px auto;
width:800px;
height:200px;
background:red;
position:relative;
overflow:hidden;
}
#div1 ul{
border:solid 1px #ccc;
margin-top:20px;
width:800px;
height:100px;
position:absolute;
float:left;
}
#div1 ul li{
list-style:none;
float:left;
width:200px;
height:100px;
}
#div1 ul li img{
float:left;
margin-left:0px;
width:200px;
height:100px;
}
</style>
</head>
<body>
<a href="#" id="left">向左滚</a>
<a href="#" id="right">向右滚</a>
<div id="div1">
<ul>
<li><img src="images/zxy1.jpg"></li>
<li><img src="images/zxy2.jpg"></li>
<li><img src="images/zxy3.jpg"></li>
<li><img src="images/zxy4.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var oDiv1=document.getElementById("div1");
var oUl=oDiv1.getElementsByTagName("ul")[0];
var lis=oUl.getElementsByTagName("li");
oUl.innerHTML+=oUl.innerHTML; //将图片拷贝一份用于轮播
//ul的宽度等于
oUl.style.width=lis[0].offsetWidth*lis.length+'px';
var speed=2;
var oA1=document.getElementById("left");
var oA2=document.getElementById("right");
//左滚
oA1.onclick=function(){
speed=-2;
}
//右滚
oA2.onclick=function(){
speed=+2;
}
//移动函数
function move(){
//左移(即oUl.offsetLeft-2) 当图片往左边移动到一半的时候重新UL左边距设置为0
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
//右移（即oUl.offsetLeft+2） 如果图片往右边移动到超出左边的边界时将UL重新挪到左边来
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2;
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
//当鼠标移入UL的时候关闭定时器
oUl.onmouseover=function(){
clearInterval(timer);
}
oUl.onmouseout=function(){
timer=setInterval(move,30);
}
</script>
</body>
</html>
浙公网安备 33010602011771号