定时器的简单介绍：
获取系统时间：
定时器的使用1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
定时器
functionshow(){
alert("a");
}
setInterval(show,1000);
定时器的使用2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
定时器的开启和关闭
window.onload=function(){
varoBtn1=document.getElementById("btn1");
varoBtn2=document.getElementById("btn2");
oBtn1.onclick=function(){
timer=setInterval(function(){
alert('a');
},1000);
};
oBtn2.onclick=function(){
clearInterval(timer);
};
};
开启定时器有一个对应的参数，我们使用这个对应的参数，来开启和关闭对应的定时器
定时器的运动基础：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
运动基础
#div1{
width:200px;
height:200px;
background: red;
position: absolute;
left:0;
top:50px;
}
setInterval(function(){
varoDiv=document.getElementById("div1");
oDiv.style.left=oDiv.offsetLeft+10+'px';
},30);
js中有一个offsetLeft/offsetTop/offsetWidth/offsetHight可以综合考虑影响这个模块位置的属性。
移动相册：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
图片滚动
*{
margin:0;
padding:0;
}
#div1{
width:716px;
height:119px;
margin:100pxauto;
position: relative;
background: red;
}
#div1ul{
position: absolute;
left:0px;
top:0px;
}
#div1ulli{
float: left;
width:179px;
height:119px;
list-style: none;
}
window.onload=function(){
varoDiv=document.getElementById("div1");
varoUl=oDiv.getElementsByTagName("ul")[0];
setInterval(function(){
oUl.style.left=oUl.offsetLeft-2+"px";
},30);
};
移动相册完整版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
图片滚动
*{
margin:0;
padding:0;
}
#div1{
width:716px;
height:119px;
margin:100pxauto;
position: relative;
background: red;
overflow: hidden;
}
#div1ul{
position: absolute;
left:0px;
top:0px;
}
#div1ulli{
float: left;
width:179px;
height:119px;
list-style: none;
}
window.onload=function(){
varoDiv=document.getElementById("div1");
varoUl=oDiv.getElementsByTagName("ul")[0];
varaLi=oUl.getElementsByTagName("li");
varspeed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
functionmove(){
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";
}
vartimer=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;
};
};
向左走
向右走
这边的向左走和向右走可以控制其滚动的方向
---------------------
作者：爸爸去哪了2之熊猫三胞胎
来源：CSDN
原文：https://blog.csdn.net/u014785563/article/details/54848286
如果您前端学习的过程中遇到难题，欢迎关注微信公众号【筑梦前端】，大家一起交流讨论解决！
网友评论