JavaScript学习笔记整理_setTimeout的应用

首先让我们来详细讲解“JavaScript学习笔记整理_setTimeout的应用”这个主题的完整攻略。

简介

setTimeout() 是 JavaScript 的一个函数，它可以在一定时间后执行指定的函数或代码。通过 setTimeout() 函数，我们可以实现倒计时、延迟显示等功能。

语法

setTimeout() 函数的语法如下：

setTimeout(function, milliseconds, param1, param2, ...)

参数说明：

function：必需，要添加的函数或要执行的代码串。
milliseconds：必需，规定需要延迟的毫秒数。1000 毫秒等于 1 秒。
param1, param2：可选，传递给函数的参数。

示例1：延迟显示提示框

下面是一个示例，当用户在页面上停留超过 5 秒后，会弹出一个提示框提醒用户该做什么。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>延迟显示提示框</title>
   </head>

   <body>
      <h1>JavaScript setTimeout() 函数示例</h1>
      <p>请在页面上停留 5 秒钟，会弹出一个提示框。</p>

      <script>
         function showMessage() {
            alert('请注意！您已经停留超过 5 秒钟。');
         }

         setTimeout(showMessage, 5000);
      </script>
   </body>
</html>

在上面的示例中，我们定义了一个名为 showMessage() 的函数，并将该函数作为参数传递给了 setTimeout() 函数。setTimeout() 函数中的第二个参数是 5000，也就是我们要延迟的毫秒数，即 5 秒钟。当用户在页面上停留超过 5 秒钟后，会弹出一个提示框。

示例2：实现倒计时

下面是一个示例，实现了一个倒计时功能。在页面加载后，会显示一个数字，然后每隔 1 秒钟数字会减 1，直到倒计时结束。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>JavaScript setTimeout() 函数示例</title>
   </head>

   <body onload="startCountdown()">
      <h1>JavaScript setTimeout() 函数示例</h1>
      <p>请在页面上观察倒计时的效果。</p>
      <p id="countdown"></p>

      <script>
         var currentCount = 10;

         function countdown() {
            if (currentCount == 0) {
               clearTimeout(timeId);
               document.getElementById('countdown').innerHTML = '倒计时结束';
            } else {
               document.getElementById('countdown').innerHTML = '当前数字为：' + currentCount;
               currentCount--;
            }
         }

         function startCountdown() {
            countdown();
            var timeId = setInterval(countdown, 1000);
         }
      </script>
   </body>
</html>

在上面的示例中，我们定义了一个名为 countdown() 的函数，用于实现倒计时的功能。在页面加载后，我们调用 startCountdown() 函数，该函数通过 setInterval() 函数每隔 1 秒钟执行一次 countdown() 函数，实现了倒计时功能。

以上就是关于“JavaScript 学习笔记整理：setTimeout 的应用”主题的完整攻略，包含了 setTimeout() 函数的语法、示例代码，以及两个不同的用例：延迟显示提示框和实现倒计时功能。希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript学习笔记整理_setTimeout的应用 - Python技术站

JavaScript学习笔记整理_setTimeout的应用

简介

语法

示例1：延迟显示提示框

示例2：实现倒计时

相关文章