h5+JavaScript实现一个倒计时功能

发布时间:2024年01月16日

h5+JavaScript实现一个倒计时功能

话不多说上代码!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
</head>

<body>
  <h1>倒计时功能</h1>
  <label for="time-input">倒计时时间:</label>
  <input type="number" id="time-input" min="1" required>
  <button id="start-button">开始倒计时</button>
  <div id="countdown-display"></div>

  <script>
    // 获取页面元素
    var timeInput = document.getElementById("time-input");
    var startButton = document.getElementById("start-button");
    var countdownDisplay = document.getElementById("countdown-display");

    // 定义变量
    var countdownInterval;
    var timeRemaining;

    // 绑定按钮点击事件
    startButton.addEventListener("click", function () {
      // 获取用户输入的时间
      var timeInSeconds = parseInt(timeInput.value);

      // 验证用户输入的时间
      if (isNaN(timeInSeconds) || timeInSeconds < 1) {
        alert("Please enter a valid time in seconds.");
        return;
      }

      // 启动倒计时
      startCountdown(timeInSeconds);
    });

    // 启动倒计时
    function startCountdown(timeInSeconds) {
      // 计算倒计时结束时间
      var endTime = Date.now() + timeInSeconds * 1000;

      // 更新倒计时显示
      updateCountdownDisplay(endTime);

      // 每秒更新倒计时显示
      countdownInterval = setInterval(function () {
        updateCountdownDisplay(endTime);
      }, 1000);
    }

    // 更新倒计时显示
    function updateCountdownDisplay(endTime) {
      // 计算剩余时间
      timeRemaining = Math.floor((endTime - Date.now()) / 1000);

      // 倒计时结束
      if (timeRemaining <= 0) {
        clearInterval(countdownInterval);
        countdownDisplay.innerHTML = "倒计时结束!";
        return;
      }

      // 更新倒计时显示
      countdownDisplay.innerHTML = "剩余: " + timeRemaining + " 秒";
    }

  </script>
</body>

</html>

在上面的代码中,我们首先获取页面上的元素,并定义了一些变量用于处理倒计时逻辑。
然后,我们绑定了按钮的点击事件,并在点击按钮时获取用户输入的时间。如果用户输入无效,我们会弹出一个警告。
接下来,我们定义了startCountdown 函数,它将启动倒计时并更新倒计时显示。我们使用 setInterval函数每秒钟更新一次倒计时显示,直到倒计时结束。
最后,我们定义了 updateCountdownDisplay函数,它计算剩余时间并更新倒计时显示。如果倒计时结束,我们清除定时器并显示倒计时完成的提示。

文章来源:https://blog.csdn.net/weixin_71893790/article/details/135624791
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。