自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解JavaScript時(shí)間

作者：前端進(jìn)階者
開發(fā) 前端
本文基于JavaScript基礎(chǔ)，介紹了JavaScript 時(shí)間事件 setTimeout()，setInterval() 方法，這兩種方法的語法，實(shí)際用法和區(qū)別。以及如何去啟動(dòng)定時(shí)器，停止定時(shí)器，通過詳細(xì)案例分析。運(yùn)行效果圖的展示。進(jìn)行了詳細(xì)的講解。代碼很簡單，希望能夠幫助你學(xué)習(xí)。

[[400056]]

一、前言

setTimeout(function, milliseconds) 在等待指定的毫秒數(shù)后執(zhí)行函數(shù)。setInterval(function, milliseconds) setTimeout()相同，但會(huì)重復(fù)執(zhí)行。

二、時(shí)間事件

窗口對象允許在指定的時(shí)間間隔執(zhí)行代碼。時(shí)間間隔稱為定時(shí)事件。

1. setTimeout() 方法

  1. window.setTimeout(function, milliseconds); 

window.setTimeout() 方法可以不用窗口window前綴編寫。

第一個(gè)參數(shù)是要執(zhí)行的函數(shù)，第二個(gè)參數(shù)指示執(zhí)行前的毫秒數(shù)。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項(xiàng)目</title> 
  6. </head> 
  7. <body style="background-color: aqua;\"> 
  8.  
  9. <p>點(diǎn)擊"試試". 等3秒，這個(gè)頁面將提示"Hello".</p> 
  10.  
  11. <button onclick="setTimeout(myFunction, 3000);">試試</button> 
  12.  
  13. <script> 
  14. function myFunction() { 
  15. alert('Hello'); 
  16. } 
  17. </script> 
  18.  
  19.  
  20. </body> 
  21. </html> 

如何停止執(zhí)行?

clearTimeout() 方法停止指定的函數(shù)setTimeout()的執(zhí)行。

語法：

  1. window.clearTimeout(timeoutVariable) 

window.clearTimeout() 方法可以不用窗口window前綴編寫。

clearTimeout() 方法使用setTimeout()返回的變量。

  1. myVar = setTimeout(function, milliseconds); 
  2. clearTimeout(myVar); 

如果該函數(shù)尚未被執(zhí)行，則可以通過調(diào)用 clearTimeout() 方法:

例：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項(xiàng)目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <p>點(diǎn)擊 "試試". 等3秒。這個(gè)頁面將出現(xiàn)一個(gè)"Hello".</p> 
  10. <p>單擊“停止”以阻止第一個(gè)功能執(zhí)行。</p> 
  11. <p>（您必須在3秒鐘之前單擊“停止”。）</p> 
  12.  
  13. <button onclick="myVar = setTimeout(myFunction, 3000)">試試</button> 
  14.  
  15. <button onclick="clearTimeout(myVar)">停止</button> 
  16.  
  17. <script> 
  18. function myFunction() { 
  19. alert("Hello"); 
  20. } 
  21. </script> 
  22.  
  23. </body> 
  24. </html> 

2. setInterval() 方法

setInterval() 方法在給定的時(shí)間間隔內(nèi)重復(fù)給定的函數(shù)。

  1. window.setInterval(function, milliseconds); 

window.setInterval() 方法可以不用窗口window前綴編寫。

第一個(gè)參數(shù)是要執(zhí)行的函數(shù)。

第二個(gè)參數(shù)指示每次執(zhí)行之間的時(shí)間間隔的長度。

例：

執(zhí)行一個(gè)稱為“myTimer”的函數(shù)，每隔二秒(像一個(gè)數(shù)字表)。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項(xiàng)目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <p>A script on this page starts this clock:</p> 
  10.  
  11. <p id="demo"></p> 
  12.  
  13. <script> 
  14. var myVar = setInterval(myTimer, 1000); 
  15.  
  16. function myTimer() { 
  17. var d = new Date(); 
  18. document.getElementById("demo").innerHTML = d.toLocaleTimeString(); 
  19. } 
  20. </script> 
  21.  
  22.  
  23. </body> 
  24. </html> 

 

(一秒鐘等于1000毫秒)。

如何停止執(zhí)行?

clearInterval() 方法停止指定的函數(shù)setInterval()的執(zhí)行。

  1. window.clearInterval(timerVariable) 

window.clearInterval() 方法可以不用窗口window前綴編寫。

clearInterval() 方法使用從setInterval()返回的變量 。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>項(xiàng)目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"> 
  8.  
  9.     <p>A script on this page starts this clock:</p> 
  10.  
  11.     <p id="demo"></p> 
  12.  
  13.     <button onclick="clearInterval(myVar)">停止</button> 
  14.  
  15.     <script> 
  16.       var myVar = setInterval(myTimer, 1000); 
  17.  
  18.       function myTimer() { 
  19.         var d = new Date(); 
  20.         document.getElementById("demo").innerHTML = d.toLocaleTimeString(); 
  21.       } 
  22. </script> 
  23.  
  24.  
  25.   </body> 
  26. </html> 

代碼解析：

運(yùn)行效果：

三、總結(jié)

本文基于JavaScript基礎(chǔ)，介紹了JavaScript 時(shí)間事件 setTimeout()，setInterval() 方法，這兩種方法的語法，實(shí)際用法和區(qū)別。以及如何去啟動(dòng)定時(shí)器，停止定時(shí)器，通過詳細(xì)案例分析。運(yùn)行效果圖的展示。進(jìn)行了詳細(xì)的講解。代碼很簡單，希望能夠幫助你學(xué)習(xí)。

希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

使用JavaScript 語言，方便大家更好理解，希望對大家的學(xué)習(xí)有幫助。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。

 

責(zé)任編輯：姜華 來源： 前端進(jìn)階學(xué)習(xí)交流
JavaScript 前端JavaScript時(shí)間
相關(guān)推薦

2023-07-30 15:18:54

JavaScript屬性

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2023-09-06 14:57:46

JavaScript編程語言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開發(fā)

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數(shù)語法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2024-05-17 16:22:25

JavaScript

2020-10-27 11:24:29

avaScript m

2021-07-02 10:00:50

JavaScriptObject 函數(shù)

2020-12-23 08:12:08

javascriptSVG腳本SVG元素

2024-08-16 15:44:53

JavaScriptWhile循環(huán)

2022-01-21 11:28:59

window瀏覽器JavaScript

2021-11-16 07:54:33

JavaScript導(dǎo)航HTML

2020-10-20 15:37:48

了解JavaScrip
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)