计时器的用法

最新推荐文章于 2024-06-12 11:59:04 发布

YPX_早起的鸟儿

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量203

点赞数

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

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/132087489

版权

一. window有两种定时器:

1.延时定时器setTimeout----只执行一次

window.setTimeout(函数,多少毫秒)

两个参数：（fn，ms）

1000毫秒=1秒

eg：

window.setTimeout(function(){
   console.log("我在两秒之后执行了");
     },2000)

window可省略不写，延迟计时器，2秒之后执行了，只执行了一次。

2. 轮询定时器setInterval-----不会停的、

参数：函数，时间；多少秒执行一次

想要停止，必须触发关闭；Window.clearInterval


    // 定义一个变量，计时器 
     var timer=window.setInterval(function(){
         console.log("我在两秒之后执行了");
     },2000)


     setTimeout(function(){
        window.clearInterval(timer)
     },8000)

循环计时器，每隔2秒执行一次，一直执行，满足关闭条件才能关闭。

3.计时器的使用：30s倒计时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30s倒计时</title>
</head>
<body>
    <h1 id="countdown"></h1>
</body>
</html>
<script>
    // 获取显示倒计时的元素
const countdownElement = document.getElementById('countdown');

// 设置倒计时时长（以秒为单位）
const countdownDuration = 30;

// 获取当前时间
const startTime = new Date().getTime();

// 更新倒计时的函数
function updateCountdown() {
  // 获取当前时间
  const currentTime = new Date().getTime();

  // 计算剩余时间（以毫秒为单位）
  const remainingTime = countdownDuration * 1000 - (currentTime - startTime);

  // 将剩余时间转换为秒数
  const remainingSeconds = Math.floor(remainingTime / 1000);

  // 更新显示倒计时的元素
  countdownElement.textContent = remainingSeconds;

  // 检查是否倒计时结束
  if (remainingSeconds <= 0) {
    clearInterval(countdownInterval);
    countdownElement.textContent = '倒计时结束';
  }
}

// 每秒更新一次倒计时
const countdownInterval = setInterval(updateCountdown, 1000);
</script>