数据结构
网络
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 次浏览
广告