一、計時器 setInterval ( 函數/名稱 , 毫秒數 )表示每經過一定的毫秒後，執行一次相應的函數(重覆) setTimeout ( 函數/名稱 , 毫秒數 ) 表示經過一定的毫秒後，只執行一次相應的函數(不重覆) 清除計時器： clearInterval( ); clearTimeout ...
一、計時器
setInterval ( 函數/名稱 , 毫秒數 )表示每經過一定的毫秒後，執行一次相應的函數(重覆)
setTimeout ( 函數/名稱 , 毫秒數 ) 表示經過一定的毫秒後，只執行一次相應的函數(不重覆)
清除計時器：
clearInterval( );
clearTimeout( );
當計時器調用執行完畢時，它將返回一個timer ID，
如果將該ID傳遞給clearInterval，便可以終止代碼的執行。
實例：
頁面佈局：
<div id="wrap">
<h2>計時開始</h2>
<p id="show"></p>
<button id="btn1">clearInterval( )</button>
<button id="btn2">clearTimeout( )</button>
</div>
JS代碼：
1 var show=document.getElementById('show'); 2 var btn1=document.getElementById('btn1'); 3 var btn2=document.getElementById('btn2'); 4 var x=0; 5 var timer1=null;//設置timer1為空對象類型 6 var timer2=null; 7 //1.setInterval ( 函數/名稱 , 毫秒數 )表示每經過一定的毫秒後，執行一次相應的函數(重覆) 8 timer1=setInterval(function(){//當計時器調用執行完畢時，它將返回一個timerID(timer1), 9 x++; 10 show.innerHTML=x; 11 },500); 12 btn1.onclick=function(){ 13 clearInterval(timer1);//將該ID傳遞給clearInterval，便可以終止代碼的執行 14 // 清除計時器：clearInterval( ); 15 } 16 //2.setTimeout ( 函數/名稱 , 毫秒數 )表示經過一定的毫秒後，只執行一次相應的函數(不重覆) 17 timer2=setTimeout(function(){ 18 alert('我是一次性計時器'); 19 },3000) 20 btn2.onclick=function(){ 21 clearTimeout(timer2);//清除計時器 clearTimeout( ); 22 }
二、scroll系列屬性
scrollLeft：設置或獲取當前左滾的距離，即左捲的距離；
scrollTop：設置或獲取當前上滾的距離，即上捲的距離；
scrollHeight：獲取對象可滾動的總高度；
scrollWidth：獲取對象可滾動的總寬度；
使用實例：
頁面佈局：
<div id="box">
<div id="box1">幾點見覅當時就發哦哦降低副書記艾佛積分抵沙發幾點見覅當時就發哦哦降低副書記艾佛積。。。。。。</div>
</div>
<button id="btn">獲取</button>
<p id="totop">返回頂部</p>
JS代碼：
var box=document.getElementById('box'); var box1=document.getElementById('box1'); var btn=document.getElementById('btn'); var show=document.getElementById('show'); var totop=document.getElementById('totop'); btn.onclick=function(){ console.log(box.scrsollLeft);//獲取父級（box）左滾的距離，即左捲的距離； console.log(box.scrollTop);//獲取當前父級（box）上滾的距離，即上捲的距離 console.log(box.scrollWidth);//獲取對象（box1）可滾動的總寬度 console.log(box.scrollHeight);//獲取對象（box1）可滾動的總高度 }
document.body 訪問到<body>元素，頁面沒有DTD，或者說沒有指定doctype時，
document.documentElement 訪問到<html>根元素，頁面有DTD，或者說指定了doctype時，
獲取scrollTop的相容寫法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
示例：
1 totop.onclick=function(){ 2 var timer1=null; 3 var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 4 //document.documentElement訪問到<html>根元素(頁面沒有DTD，或者說沒有指定doctype時) 5 //window.pageYOffset (safari自己的方法) 6 //document.body 訪問到<body>元素,適用（頁面沒有DTD，或者說沒有指定doctype時） 7 timer1=setInterval(function(){ 8 scrollTop-=20; 9 if(scrollTop<=0){ 10 /*scrollTop=0; 11 return false;*/ 12 clearInterval(time); 13 } 14 document.documentElement.scrollTop=scrollTop; 15 document.body.scrollTop=scrollTop; 16 window.pageYOffset=scrollTop; 17 },2) 18 }
三、offset系列屬性
offsetLeft：獲取對象左側與定位父級之間的距離
offsetTop：獲取對象上側與定位父級之間的距離
PS：獲取對象到父級的距離取決於最近的定位父級
offsetWidth：獲取元素自身的寬度（包含邊框）
offsetHeight：獲取元素自身的高度（包含邊框）
四、client系列屬性
clientLeft、clientTop：獲取元素內容到邊框的距離，效果和邊框寬度相同，比較少使用
clientWidth：獲取元素自身的寬度（不含邊框）
clientHeight：獲取元素自身的高度（不含邊框）
五、圖片無縫滾動
頁面佈局：
1 <div id="wrap"> 2 <div id="con"> 3 <div id="box1"> 4 <img src="images/qzl1.jpg" alt=""> 5 <img src="images/qzl2.jpg" alt=""> 6 <img src="images/qzl3.jpg" alt=""> 7 <img src="images/qzl4.jpg" alt=""> 8 <img src="images/qzl5.jpg" alt=""> 9 </div> 10 <div id="box2"> 11 </div> 12 </div> 13 </div> 14 <script> 15 var wrap=document.getElementById('wrap'); 16 var box1=document.getElementById('box1'); 17 var box2=document.getElementById('box2'); 18 // var img1=wrap.getElementsByTagName('img')[0]; 19 var timer=null,x=0; 20 var maxWidth=box1.offsetWidth; 21 box2.innerHTML=box1.innerHTML; 22 function move(){ 23 timer=setInterval(function(){ 24 x+=5; 25 if(x>=maxWidth){//臨界點，一組圖片轉完時 26 wrap.scrollLeft=0; 27 //設這組圖片的左捲距離為0，回到初始位置 28 x=0; 29 } 30 wrap.scrollLeft=x; 31 },20) 32 } 33 move();//進入頁面自動執行 34 wrap.onmouseenter=function(){ 35 clearInterval(timer); 36 } 37 wrap.onmouseleave=function(){ 38 move(); 39 } 40 </script>
