个人中心
gpt4 book ai didi

一篇文章带你了解JavaScript时间

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章一篇文章带你了解JavaScript时间由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

一篇文章带你了解JavaScript时间

1、前言

  。

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

2、时间事件

  。

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

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. } 
  17. </script> 
  18.  
  19.  
  20. </body> 
  21. </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. } 
  21. </script> 
  22.  
  23. </body> 
  24. </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. } 
  20. </script> 
  21.  
  22.  
  23. </body> 
  24. </html> 

  。

(一秒钟等于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时间

3、总结

  。

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

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

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

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

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

最后此篇关于一篇文章带你了解JavaScript时间的文章就讲到这里了,如果你想了解更多关于一篇文章带你了解JavaScript时间的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： 4个提高Jupiter Notebooks开发效率的工具
文章推荐： 聊聊MySQL的COUNT的性能，看看怎么最快?
文章推荐： Oracle to_date()函数的用法
文章推荐： MySQL update 语句的正确用法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com