创建一个即将推出的页面，其中包含一个 JavaScript 倒数计时器

电玩女神 2023-10-10 22:24 10阅读 0赞

在本教程中，您将学习如何使用 JavaScript 倒计时器开发即将推出的登录页面。此页面可用于显示距离大型活动、网站发布或产品发布的剩余时间。

让我们开始使用以下标记创建一个新的 HTML 文件：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div id="countdown">
          <h1>Coming Soon!</h1>
          <p>Consectetur quo enim sequi. Repellendus sint deserunt et. Qui delectus repellat a illo adipisci sed. Aut quod alias atque sunt dolorem aliquam reprehenderit et.</p>      
          <ul>
            <li><span id="days"></span>Days</li>
            <li><span id="hours"></span>Hours</li>
            <li><span id="minutes"></span>Minutes</li>
            <li><span id="seconds"></span>Seconds</li>
          </ul>      
        </div>
        <script src="script.js"></script>
      </body>
    </html>

接下来创建一个 script.js文件并开始为每个时间单位定义变量：

(() => {
        
        const sec = 1000,
        min = sec * 60,
        hour = min * 60,
        day = hour * 24;  
    })();

在构建倒数计时器时，我们需要使用以下格式指定结束日期/时间：

const end = new Date("Jul 01, 2021 12:00:00").getTime();

为了计算剩余时间，我们将使用setInterval每 1000 毫秒获取一次当前时间。然后我们可以通过从结束日期中减去剩余时间来计算剩余时间并更新 HTML 文本：

const int = setInterval(() => {
        
      const current = new Date().getTime();
      const remaining = end - current;
      document.getElementById("days").innerText = Math.floor(remaining / day);
      document.getElementById("hours").innerText = Math.floor( (remaining % day) / hour );
      document.getElementById("minutes").innerText = Math.floor( (remaining % hour) / min );
      document.getElementById("seconds").innerText = Math.floor( (remaining % min) / sec );   
    }, 1000);

目前，当倒计时到期时，计时器将继续运行，显示自结束日期以来经过的时间。相反，我们会将所有数字设置为 0 并更新文本以指示已达到结束日期。为此，将以下内容添加到方法的末尾setInterval：

if (remaining < 0) {
      document.querySelector("h1").innerText = "We Have Arrived!";
      document.querySelector("p").innerHTML = "The big day is finally here - view our <a href=https://www.website.com>website<a/> for more information.";
      const digit = document.querySelectorAll("span");
      digit.forEach((digit) => {
        digit.innerText = "0";
      });
      clearInterval(int);
    }

现在就完成了 CSS 的倒计时功能。

因此，倒计时在水平和垂直方向上居中对齐，主体已设置为display: flex居中对齐。背景图片来自Pexels，并使用 CSS 属性设置为全屏显示cover：

html {
        
      height: 100%;
      overflow: hidden;
    }
    body {
        
      background: url("https://images.pexels.com/photos/1252869/pexels-photo-1252869.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center fixed;
      color: #fff;
      font-family: sans-serif;
      text-align: center;
      min-height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

对于排版，我们将添加一个text-shadow，因为它在覆盖在背景图像上时更易于阅读，我们还将增加字体大小并覆盖默认的蓝色链接颜色：

h1 {
        
      font-size: 4rem;
      text-shadow: 1px 1px 5px #000;  
      margin: 0;
    }
    p {
        
      font-size: 1.2rem;  
      text-shadow: 1px 1px 2px #000;
    }
    a {
        
      color: #fff;
    }

最后是倒数计时器中的数字和文本。由于有四个元素，我们将使用flex: 25%它们在水平轴上均匀分布。为了突出数字，我们将添加背景颜色（取自背景图像）：

#countdown {
        
      max-width: 600px;
    }
    #countdown ul {
        
      margin: 5% 0 0 0;
      padding: 0;
      display: flex;
      gap: 5%;
    }
    #countdown ul li {
        
      flex: 25%;
      padding: 5%;
      margin: 0;
      list-style: none;
      background: #001f2f;
      border-radius: 5px;
    }
    #countdown ul li span {
        
      display: block;
      font-size: 3rem;
    }

4K炫酷蓝色科技倒计时