定时器的介绍

小小飞舞

已于 2023-04-16 13:01:26 修改

阅读量108

点赞数

文章标签： javascript 前端开发语言

于 2023-04-16 12:17:11 首次发布

本文链接：https://blog.csdn.net/2301_76629787/article/details/130180771

版权

JS中定时器分为延时型定时器setTimeout（）和间隔型定时器setInterval（）两种。

setTimeout（）：延时型定时器。设置一个定时器，在定时器到期后执行一次函数或代码段。

应用如下：

创造一个函数show（），用Date对象来获取此时的时间，然后设置一个延时型定时器，每隔1000毫秒，执行一次show函数。

setInterval（）：间隔型定时器。以固定时间为间隔重复调用一个函数或代码段。

应用如下：

创造一个函数show（），用Date对象来获取此时的时间，然后设置一个间隔型定时器，以1000毫秒为周期，重复执行函数show。

两个定时器的区别在于，setTimeout（）是在指定时间后，执行代码段或函数，代码段或函数只执行一次。而setInterval（）是按照所设定的时间为周期，重复执行某些代码段或函数，定时器不会自动停止，除非调用clearInterval（）函数来手动结束函数或者关闭浏览器窗口。

示例：定时器的开始与关闭

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           #time {
               color: blueviolet;
               font-size: 30px;
               font-family: 隶书;
           }
       </style>
       <script>
           window.onload = function() {
               var oBtn1 = document.getElementById('btn1');
               var oBtn2 = document.getElementById('btn2');
               var timer = null;
               oBtn1.onclick = function() {
                   timer = setInterval(function() {
                       var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                       var myTime = new Date();
                       var year = myTime.getFullYear();
                       var month = myTime.getMonth();
                       var hao = myTime.getDate();
                       var week = myTime.getDay();
                       var shi = myTime.getHours();
                       var fen = myTime.getMinutes();
                       var miao = myTime.getSeconds();
                       var div = document.getElementById('time');
                       div.innerText = "今天是：" + year + "年" + (month + 1) + "月" + hao + "日" + arr[week] + shi + ":" + fen + ":" + miao;
                   }, 1000);
               }
               oBtn2.onclick = function() {
                   clearInterval(timer);
               }
           }
       </script>
   </head>

</html>

静态页面中，用块集元素标签div限制范围，并将id设置为time,再用input标签设置两个按钮，命名为“开启”与“关闭”，id分别为“btn1”与“btn2”。

在头部中设置CSS样式，设置边框样式。再在script标签中设置JS样式，因该标签在头部标签中，所以用延迟加载代码window.onload将其包裹，在其中设置变量，并用document.getElementById获取两个input标签的id元素，然后为btn1标签添加鼠标单击事件，并设置setInterval定时器，将btn1按钮设置为开始标签。再为btn2添加鼠标单击事件，并设置clearInterval结束定时器，将btn2按钮设置为结束按钮。

小小飞舞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
定时器的介绍

而setInterval（）是按照所设定的时间为周期，重复执行某些代码段或函数，定时器不会自动停止，除非调用clearInterval（）函数来手动结束函数或者关闭浏览器窗口。创造一个函数show（），用Date对象来获取此时的时间，然后设置一个间隔型定时器，以1000毫秒为周期，重复执行函数show。创造一个函数show（），用Date对象来获取此时的时间，然后设置一个延时型定时器，每隔1000毫秒，执行一次show函数。设置一个定时器，在定时器到期后执行一次函数或代码段。
复制链接

扫一扫