如何做 - 即將推出頁面
瞭解如何使用 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);
自己動手試一試 »
