如何创建 - 即将推出页面
了解如何使用 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>
步骤 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);
亲自试一试 »
