資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用 JavaScript 建立“即將推出”頁面？
在本文中，我們將建立一個“即將推出”頁面，該頁面將顯示將於特定日期和時間發生的活動計時器。計時器將按相反方向執行，而在實際活動時間，如果已配置，它將基本上顯示活動頁面。
“即將推出”類似於具有某些特殊規格的網頁。這些規格定義了網站即將推出什麼（例如釋出新智慧手機、功能、電視、軟體、工具等）。
方法
我們首先將設定一個準備顯示在背景畫布上的頁面。
使用 Date() 方法設定釋出日期。
使用 setInterval() 方法每秒更新計時器倒計時。
從釋出日期計算天數、小時、分鐘和秒數。
顯示結果。
示例
在下面的示例中，我們已經透過使用基本的 HTML、CSS 和 JavaScript 程式碼建立了一個“即將推出”頁面。
# index.html
<!DOCTYPE HTML>
<HTML>
<style>
header {
background-image:
url( https://drive.google.com/uc?export=view&id=1wbADBlJqxBvwFKn12UddfnKiM4irfw_1);
background-position: center;
height: 100vh;
background-size: 100% 96%;
}
.tech {
top: 19%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
color: black;
text-align: center;
font-size: 25px;
}
#release {
padding-top: 25px;
color: darkslategrey;
font-size: 60px;
word-spacing: 10px;
}
</style>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<BODY>
<header>
<div class="tech">
<h2>TUTORIX COMING SOON</h2>
<p id="release"></p>
</div>
</header>
<script>
// Set the date of launching
var RemainingTime = new Date("May 17, 2022 00:00:00");
var RemainingTime = RemainingTime.getTime();
// Update the count down every second
var x = setInterval(function() {
// Get current date and time
var now = new Date().getTime();
var distance = RemainingTime - now;
// Days, hours, minutes and seconds time calculations
var days_remaining =
Math.floor(distance / (1000 * 60 * 60 * 24));
var hours_remaining =
Math.floor(days_remaining / (1000 * 60 * 60));
var x1 = distance % (1000 * 60 * 60);
var minutes = Math.floor(x1 / (1000 * 60));
var x2 = distance % (1000 * 60);
var seconds = Math.floor(x2 / 1000);
// Display the results
document.getElementById("release").innerHTML = days_remaining + " : " + hours_remaining + " : " + minutes + " : " + seconds;
// Text after count down is over
if (distance < 0) {
clearinterval(x);
document.getElementById("Release").
innerHTML = "Welcome";
}
}, 1000);
</script>
</BODY>
</HTML>輸出
更新日期：22-4-2022
259 次瀏覽
廣告