JS实现的网页倒计时数字时钟效果

2023年5月27日下午2:39 • JavaScript

JS实现的网页倒计时数字时钟效果的攻略如下：

需求

我们需要一个Web页面上实现一个倒计时数字时钟效果。

设计思路

生成HTML结构
使用CSS样式美化数字
使用JS实现倒计时功能
使用JS更新HTML内容

HTML代码

<div class="countdown">
  <span id="days"></span>天
  <span id="hours"></span>时
  <span id="minutes"></span>分
  <span id="seconds"></span>秒
</div>

在HTML中，我们定义了一个带有countdown类的div，并在其中嵌套了四个span元素，分别用于显示天数、小时数、分钟数和秒数，它们的id分别为days、hours、minutes和seconds。

CSS样式

.countdown span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 26px;
  color: #fff;
  background-color: #666;
  text-align: center;
}

我们使用CSS样式，美化数字显示效果，设置了数字样式的宽高、行距、字体、颜色和背景，使得这些数字非常醒目。

JS代码

function countdown() {
  let now = new Date();
  let event = new Date("2022/01/01");

  let seconds = Math.floor((event - now) / 1000);
  let days = Math.floor(seconds / (60 * 60 * 24));
  seconds = seconds % (60 * 60 * 24);
  let hours = Math.floor(seconds / (60 * 60));
  seconds = seconds % (60 * 60);
  let minutes = Math.floor(seconds / 60);
  seconds = seconds % 60;

  document.getElementById("days").innerText = days;
  document.getElementById("hours").innerText = hours;
  document.getElementById("minutes").innerText = minutes;
  document.getElementById("seconds").innerText = seconds;
}

setInterval(countdown, 1000);

在JS中，我们实现了倒计时的功能。使用了多个变量，分别计算出当前时间和目标时间之间停留了多少天、小时、分钟和秒钟。然后，调用innerText方法，将计算出来的时间更新到HTML页面中。最后，使用setInterval函数，每秒调用一次countdown函数，以实现倒计时数字时钟的刷新。

示例说明

下面的示例展示了一个倒计时数字时钟，它的目标计时日期是2022年1月1日。

<!DOCTYPE html>
<html>
  <head>
    <title>Countdown Clock</title>
    <style>
      .countdown span {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 26px;
        color: #fff;
        background-color: #666;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="countdown">
      <span id="days"></span>天
      <span id="hours"></span>时
      <span id="minutes"></span>分
      <span id="seconds"></span>秒
    </div>
    <script>
      function countdown() {
        let now = new Date();
        let event = new Date("2022/01/01");

        let seconds = Math.floor((event - now) / 1000);
        let days = Math.floor(seconds / (60 * 60 * 24));
        seconds = seconds % (60 * 60 * 24);
        let hours = Math.floor(seconds / (60 * 60));
        seconds = seconds % (60 * 60);
        let minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;

        document.getElementById("days").innerText = days;
        document.getElementById("hours").innerText = hours;
        document.getElementById("minutes").innerText = minutes;
        document.getElementById("seconds").innerText = seconds;
      }

      setInterval(countdown, 1000);
    </script>
  </body>
</html>

你可以在浏览器中打开该HTML文件，查看倒计时数字时钟效果。

另外，我们还可以使用动态生成目标日期的方式：

let eventYear = new Date().getFullYear() + 1;
let eventDate = new Date(`2022-01-01T00:00:00-05:00`);
let event = new Date(`${eventYear}-${eventDate.getMonth()+1}-${eventDate.getDate()}T${eventDate.getHours()}:${eventDate.getMinutes()}:${eventDate.getSeconds()}${eventDate.toString().match(/-(\d{2})(:\d{2})/)[1]}`);

这段代码可以确保计时目标日期不断延后，始终能够产生准确的倒计时结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的网页倒计时数字时钟效果 - Python技术站