10秒倒计时 html代码

宋家德 41 0

10秒倒计时实现HTML代码如下:

<!DOCTYPE html>
<html>
  <head>
    <script>
      var count = 10; // 设置倒计时秒数
      
      function countdown() {
        var box = document.getElementById("countdown-box"); // 获取倒计时容器元素
        box.innerHTML = count; // 将当前倒计时秒数显示在容器中
        
        if (count > 0) {
          count--; // 更新倒计时秒数
          setTimeout(countdown, 1000); // 每隔1秒执行一次countdown函数
        } else {
          box.innerHTML = "倒计时结束!"; // 倒计时结束时显示的文本
        }
      }
    </script>
  </head>
  <body onload="countdown()">
    <p id="countdown-box"></p> // 倒计时容器元素
  </body>
</html>

10秒倒计时 html代码

通过以上代码实现了一个简单的10秒倒计时。其中,通过定时器setTimout()每隔1秒执行一次countdown()函数,实现秒数的倒计时。在页面中添加了一个p标签用于展示倒计时秒数,并在倒计时结束时展示“倒计时结束!”文本。

大家可以根据需要对具体的样式和倒计时秒数进行调整和修改,实现更丰富和个性化的效果。