即将推出页面

---

了解如何使用 CSS 和 JavaScript创建"即将推出的页面" 。

---

亲自试一试 »

---

如何创建即将推出的页面

步骤 1) 添加 HTML:

在我们的示例中，我们将使用覆盖整个页面的背景图像，并在图像中放置一些文本，让用户知道发生了什么。

这个例子展示了如何用 HTML 和 CSS 创建一个 "即将推出的页面"。 查看下一个示例，了解如何使用 JavaScript 添加 "倒数计时器"。

实例

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p>35 days</p>
  </div>
  <div class="bottomleft">
    <p>Some text</p>
  </div>
</div>

---

Advertisement

-->

---

步骤 2) 添加 CSS:

实例

/* 将 body 和 html 的高度设置为 100% 以使背景图像覆盖整个页面: */
body, html {
  height: 100%
}

.bgimg {
  /* 背景图像 */
  background-image: url('/w3images/forestbridge.jpg');
  /* 全屏 */
  height: 100%;
  /* 居中背景图像 */
  background-position: center;
  /* 缩放和放大图像 */
  background-size: cover;
  /* 添加位置:相对以启用图像内的绝对定位元素（放置文本） */
  position: relative;
   /* 为 .bgimg 容器内的所有元素添加白色文本颜色 */
  color: white;
  /* 添加字体 */
  font-family: "Courier New", Courier, monospace;
  /* 将字体大小设置为 25 像素 */
  font-size: 25px;
}

/* 将文本定位在左上角 */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

/* 将文本定位在左下角 */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

/* 将文本置于中间 */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* 为 <hr> 元素设置样式 */
hr {
  margin: auto;
  width: 40%;
} 亲自试一试 »

步骤 3) 添加 JavaScript

添加 JavaScript 以创建倒数计时器:

实例

// 设置我们倒计时的日期
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// 每 1 秒更新一次倒计时
var x = setInterval(function() {

  // 获取今天的日期和时间
  var now = new Date().getTime();

  // 找出现在和倒计时日期之间的差距
  var distance = countDownDate - now;

  // 天、小时、分钟和秒的时间计算
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 在带有 id="demo" 的元素中显示结果
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // 如果倒计时结束，写一些文字
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000); 亲自试一试 »