web前端之定时器的使用
定时器的简单介绍:
![这里写图片描述](https://img-blog.csdn.net/20170201123655677)
获取系统时间:
![这里写图片描述](https://img-blog.csdn.net/20170201123714271)
定时器的使用1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>定时器</title>
<script type="text/javascript">
function show(){
alert("a");
}
setInterval(show,1000);
</script>
</head>
<body>
</body>
</html>
定时器的使用2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>定时器的开启和关闭</title>
<script type="text/javascript">
window.onload=function(){
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
oBtn1.onclick=function(){
timer=setInterval(function(){
alert('a');
},1000);
};
oBtn2.onclick=function(){
clearInterval(timer);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" name="开启" value="开启">
<input id="btn2" type="button" name="关闭" value="关闭">
</body>
</html>
开启定时器有一个对应的参数,我们使用这个对应的参数,来开启和关闭对应的定时器
定时器的运动基础:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>运动基础</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
<script type="text/javascript">
setInterval(function(){
var oDiv=document.getElementById("div1");
oDiv.style.left=oDiv.offsetLeft+10+'px';
},30);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
js中有一个offsetLeft/offsetTop/offsetWidth/offsetHight可以综合考虑影响这个模块位置的属性
移动相册:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>图片滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 716px;
height: 119px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li{
float: left;
width: 179px;
height: 119px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
setInterval(function(){
oUl.style.left=oUl.offsetLeft-2+"px";
},30);
};
</script>
</head>
<body>
<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>
移动相册完整版:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>图片滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 716px;
height: 119px;
margin: 100px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li{
float: left;
width: 179px;
height: 119px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
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);
};
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('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>
这边的向左走和向右走可以控制其滚动的方向