数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
广告