服务器之家

服务器之家 > 正文

一篇文章带你了解JavaScript时间

时间:2021-05-20 01:18     来源/作者:前端进阶学习交流

一篇文章带你了解JavaScript时间

一、前言

 

setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。setInterval(function, milliseconds) setTimeout()相同,但会重复执行。

二、时间事件

 

窗口对象允许在指定的时间间隔执行代码。时间间隔称为定时事件。

1. setTimeout() 方法

  1. window.setTimeout(function, milliseconds); 

window.setTimeout() 方法可以不用窗口window前缀编写。

第一个参数是要执行的函数,第二个参数指示执行前的毫秒数。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;\"
  8.  
  9. <p>点击"试试". 等3秒,这个页面将提示"Hello".</p> 
  10.  
  11. <button onclick="setTimeout(myFunction, 3000);">试试</button> 
  12.  
  13. <script> 
  14. function myFunction() { 
  15. alert('Hello'); 
  16. </script> 
  17.  
  18.  
  19. </body> 
  20. </html> 

一篇文章带你了解JavaScript时间

如何停止执行?

clearTimeout() 方法停止指定的函数setTimeout()的执行。

语法:

  1. window.clearTimeout(timeoutVariable) 

window.clearTimeout() 方法可以不用窗口window前缀编写。

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

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

如果该函数尚未被执行,则可以通过调用 clearTimeout() 方法:

例:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"
  8.  
  9. <p>点击 "试试". 等3秒。这个页面将出现一个"Hello".</p> 
  10. <p>单击“停止”以阻止第一个功能执行。</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. </script> 
  21.  
  22. </body> 
  23. </html> 

一篇文章带你了解JavaScript时间

2. setInterval() 方法

setInterval() 方法在给定的时间间隔内重复给定的函数。

  1. window.setInterval(function, milliseconds); 

window.setInterval() 方法可以不用窗口window前缀编写。

第一个参数是要执行的函数。

第二个参数指示每次执行之间的时间间隔的长度。

例:

执行一个称为“myTimer”的函数,每隔二秒(像一个数字表)。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</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. </script> 
  20.  
  21.  
  22. </body> 
  23. </html> 

 一篇文章带你了解JavaScript时间

(一秒钟等于1000毫秒)。

如何停止执行?

clearInterval() 方法停止指定的函数setInterval()的执行。

  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>项目</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> 

代码解析:

一篇文章带你了解JavaScript时间

运行效果:

一篇文章带你了解JavaScript时间

三、总结

 

本文基于JavaScript基础,介绍了JavaScript 时间事件 setTimeout(),setInterval() 方法,这两种方法的语法,实际用法和区别。以及如何去启动定时器,停止定时器,通过详细案例分析。运行效果图的展示。进行了详细的讲解。代码很简单,希望能够帮助你学习。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

原文链接:https://mp.weixin.qq.com/s/qU5IkxDJDSHhddeyjgkUHQ

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部