如何 - 敬请期待页面
学习如何使用 CSS 和 JavaScript 创建“敬请期待页面”。
如何创建即将推出页面
步骤 1) 添加 HTML
在我们的示例中，我们将使用覆盖整个页面的背景图像，并将一些文本放置在图像中，让用户知道发生了什么。
此示例演示了如何仅使用 HTML 和 CSS 创建“敬请期待页面”。查看下一个示例以了解如何使用 JavaScript 添加“倒计时器”。
示例
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>敬请期待</h1>
<hr>
<p>35 天</p>
</div>
<div class="bottomleft">
<p>一些文本</p>
</div>
</div>
步骤 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 以启用图片内部绝对定位的元素（放置文本） */
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("2024 年 1 月 5 日 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 = "已过期";
}
}, 1000);
试一试 »
