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>