資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 和 JavaScript 建立一個“即將推出”頁面？
我們將建立一個帶有計時器的即將推出頁面。計時器使用 setInterval() 函式設定。時間使用 getTime() 函式獲取。
設定 div
我們將影像設定為 div 類。其餘的，即將推出文字和計時器都放置在其中 -
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr />
<h2 class="timer"></h2>
</div>
</div>
放置影像
現在使用 background-image 屬性放置影像。位置使用 background-position 屬性設定”
.bgimg {
background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-size: 25px;
filter: grayscale(100%);
}
設定居中
所有元素都設定在中心 -
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
計時器
計時器的指令碼如下所示。它放置在 <script> 元素中 -
<script>
var countDownDate = new Date("November 10, 2023 11:27:15").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "Timer Finished";
}
}, 1000);
</script>
設定倒計時
在上面，我們設定了我們正在計算的日期，即今天是 2023 年 11 月 5 日，因此計數器將持續到 11 月 10 日 -
var countDownDate = new Date("November 10, 2023 11:27:10").getTime();
計算距離（剩餘時間）
計算當前日期和倒計時之間的的時間 -
var countDownDate = new Date("November 10, 2023 11:27:15").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
倒計時結束後顯示時間
根據我們的示例，我們的計時器將在 11 月 10 日到期。之後，設定一條訊息 -
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "Timer Finished";
}
示例
要使用 CSS 和 JavaScript 建立一個即將推出頁面，程式碼如下所示 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
h1, h2 {
background-color: black;
opacity: 0.5;
}
.timer {
text-align: center;
font-size: 60px;
margin-top: 0px;
color: white;
}
.bgimg {
background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-size: 25px;
filter: grayscale(100%);
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
</head>
<body>
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr />
<h2 class="timer"></h2>
</div>
</div>
<script>
var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "Timer Finished";
}
}, 1000);
</script>
</body>
</html>
更新於： 2023-11-17
197 次檢視
廣告