寫在前面的話:之前一直以為定時器的返回值是Object類型,所以timer初始化也是寫null,今天發現返回值是number,進而發覺這個返回值代表的是定時器的索引,指代這是第幾個定時器 個人覺得只用set/clearInterval方法就好,他可以實現另外的一個方法的所有功能 啟用定時器的方法有兩 ...
寫在前面的話:之前一直以為定時器的返回值是Object類型,所以timer初始化也是寫null,今天發現返回值是number,進而發覺這個返回值代表的是定時器的索引,指代這是第幾個定時器
個人覺得只用set/clearInterval方法就好,他可以實現另外的一個方法的所有功能
啟用定時器的方法有兩種:
一、setInterval(,)
- 周期性的執行函數體,這個方法如果不主動停止的話,會一直執行
- 第一個參數是執行的函數體,一般傳入有函數名的函數方法或匿名方法,非常不建議直接傳入函數執行體,代碼可讀性會很差,應該也沒人會這樣做吧
- 第二個參數是周期時間,單位是毫秒
二、setTimeout(,)
- 在指定的時間之後執行函數體,如果有輸出,也會不間斷輸出
- 第一個參數也是要被執行的函數體
- 第二個參數是指定的延遲時間,單位是毫秒
停止定時器的方法:
一、clearclearInterval()
- 停止由 setInterval() 方法調用的定時器
- 提前定義一個變數(一般用timer)接收setInterval(),執行結束後直接把變數傳入 clearInterval()
二、clearTimeout()
- 使用方法同上
1 <script> 2 window.onload = function () { 3 //需求:點擊關閉,廣告欄消失,用定時器添加漸變效果 4 var timer = 0; 5 var ad = document.getElementsByClassName('ad')[0]; 6 var a = ad.children[0].firstElementChild || ad.children[0].firstChild; 7 8 a.onclick = function () { 9 //設置定時器 10 timer = setInterval(function() { 11 ad.style.opacity -= 0.1; 12 //透明度為0後,隱藏廣告欄,清除定時器 13 if (ad.style.opacity <= 0) { 14 ad.style.display = "none"; 15 clearInterval(timer); 16 } 17 },50); 18 } 19 20 21 var ad_both = document.body.children; 22 setTimeout(function() { 23 ad_both[1].style.display = "none"; 24 ad_both[2].style.display = "none"; 25 },5000); 26 clearTimeout(timer); 27 } 28 </script> 29 </head> 30 <body> 31 <div class="top_banner"> 32 <div class="nav">導航欄</div> 33 <div class="ad w" style="opacity: 1;"> <!--這裡不懂,不是行內式的時候,有bug--> 34 <div class="close_ad"> 35 <a href="#">×</a> 36 </div> 37 </div> 38 <div class="search w"></div> 39 </div> 40 <div class="ad_l">我將於5秒後自動消失</div> 41 <div class="ad_r">我將於5秒後自動消失</div> 42 </body>
