• JavaScript 68 JavaScript Browser BOM 68.7 JavaScript Timing 事件

    JavaScript

    文章目录

    68 JavaScript Browser BOM

    68.7 JavaScript Timing 事件

    JavaScript 可以在时间间隔内执行。

    这就是所谓的定时事件（ Timing Events）。

    68.7.1 Timing 事件

    window 对象允许以指定的时间间隔执行代码。

    这些时间间隔称为定时事件。

    通过 JavaScript 使用的有两个关键的方法：

    • setTimeout(function, milliseconds)

      在等待指定的毫秒数后执行函数。

    • setInterval(function, milliseconds)

      等同于 setTimeout()，但持续重复执行该函数。

    setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

    68.7.2 setTimeout() 方法
    window.setTimeout(function, milliseconds);

    • 1

    window.setTimeout() 方法可以不带 window 前缀来编写。

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

    第二个参数指示执行之前的毫秒数。

    【举个栗子】

    单击按钮。等待 3 秒，然后页面会提示 “Hello”：

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    68.7.3 如何停止执行？

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

    window.clearTimeout(timeoutVariable)

    • 1

    window.clearTimeout() 方法可以不带 window 前缀来写。

    clearTimeout() 使用从 setTimeout() 返回的变量：

    myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

    • 1
    • 2

    【举个栗子】

    添加停止按钮

    



    • 1
    • 2
    • 3

    在这里插入图片描述

    68.7.4 setInterval() 方法

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

    window.setInterval(function, milliseconds);

    • 1

    window.setInterval() 方法可以不带 window 前缀来写。

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

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

    本例每秒执行一次函数 “myTimer”（就像数字手表）

    【举个栗子：显示当前时间】

    var myVar = setInterval(myTimer, 1000);
 
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    一秒 = 1000毫秒

    68.7.5 如何停止执行？

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

    window.clearInterval(timerVariable)

    • 1

    window.clearInterval() 方法可以不带 window 前缀来写。

    clearInterval() 方法使用从 setInterval() 返回的变量：

    myVar = setInterval(function, milliseconds);
clearInterval(myVar);

    • 1
    • 2

    【举个栗子】

    添加了一个“停止时间”按钮：

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    68.7.6 更多实例

    在这里插入图片描述

    【由计时时间创建的时钟】

    DOCTYPE html>
<html>
<head>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // 在数字 < 10 之前加零
  return i;
}
script>
head>

<body onload="startTime()">

<div id="txt">div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

  • 相关阅读:
    leetcode 355 设计推特
    RabbitMQ常见问题
    数字化营销系统如何为消费者提供精细化服务？又有哪些特点？
    SQL Server数据类型转换函数cast()和convert()详解
    Linux基础概念--进程、子进程、进程组和会话
    docker的基本使用以及使用Docker 运行D435i
    RP9学习-2
    【Java】JVM学习
    基于php+mysql的菜品食谱美食网
    【AI视野·今日Robot 机器人论文速览 第四十八期】Thu, 5 Oct 2023
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/127782082