如何做 - 即将推出页面
了解如何使用 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("Jan 5, 2024 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);
自己动手试一试 »
