web前端之定时器的使用

2024-04-27 15:03:57

字体：大中小

来源：转载

供稿：网友

web前端之定时器的使用

定时器的简单介绍：

这里写图片描述

获取系统时间：

这里写图片描述

定时器的使用1：

定时器的使用2：

开启定时器有一个对应的参数，我们使用这个对应的参数，来开启和关闭对应的定时器

定时器的运动基础：

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