下面是“一个不错的JS HTML页面倒计时可精确到秒”的完整攻略。
1.准备工作
首先，要获取当前时间和未来的结束时间，并计算出两者之间的时间间隔。为了完成这个任务，我们需要使用JavaScript中的Date对象。
// 获取当前时间
var now = new Date();
// 获取未来结束时间
var end = new Date('2021/12/31 23:59:59');
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();
上面的代码中，我们使用了new Date()来获取当前时间和未来的结束时间，getTime()用来计算时间戳差值，得到两者之间的时间间隔。
2.计算时间差
接下来，我们需要将时间间隔转换成日、小时、分钟和秒。使用下面的代码可以实现：
// 获取各个时间单位的值
var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
var minutes = parseInt(leftTime / 1000 / 60 % 60);
var seconds = parseInt(leftTime / 1000 % 60);
上面的代码中，我们使用parseInt()函数将时间间隔转换成整数，然后根据时间间隔计算出相应的时间单位的值。比如hours变量得出的值是距离结束时间还有多少小时。
3.更新倒计时
最后一步是将倒计时的时间更新到页面上。下面是一个简单的HTML模板，用来展示倒计时。
<!-- 倒计时展示区域 -->
<div id="countdown">
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-days">0</span>
<span class="countdown-item-text">天</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-hours">0</span>
<span class="countdown-item-text">时</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-minutes">0</span>
<span class="countdown-item-text">分</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-seconds">0</span>
<span class="countdown-item-text">秒</span>
</div>
</div>
上面的HTML代码中，我们使用了四个span标签，分别用来展示倒计时的天、小时、分钟和秒。接下来的代码片段将时间值更新到上述四个span标签上。
// 将时间值更新到页面上
document.getElementById('countdown-days').innerHTML = days;
document.getElementById('countdown-hours').innerHTML = hours;
document.getElementById('countdown-minutes').innerHTML = minutes;
document.getElementById('countdown-seconds').innerHTML = seconds;
4.示例说明
下面是两个示例说明，用来展示如何将上述代码实现到具体的页面中。
示例1：简单的倒计时展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的倒计时展示</title>
</head>
<body>
<!-- 倒计时展示区域 -->
<div id="countdown">
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-days">0</span>
<span class="countdown-item-text">天</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-hours">0</span>
<span class="countdown-item-text">时</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-minutes">0</span>
<span class="countdown-item-text">分</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-seconds">0</span>
<span class="countdown-item-text">秒</span>
</div>
</div>
<script>
// 获取当前时间
var now = new Date();
// 获取未来结束时间
var end = new Date('2021/12/31 23:59:59');
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();
// 获取各个时间单位的值
var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
var minutes = parseInt(leftTime / 1000 / 60 % 60);
var seconds = parseInt(leftTime / 1000 % 60);
// 将时间值更新到页面上
document.getElementById('countdown-days').innerHTML = days;
document.getElementById('countdown-hours').innerHTML = hours;
document.getElementById('countdown-minutes').innerHTML = minutes;
document.getElementById('countdown-seconds').innerHTML = seconds;
// 每隔一秒更新一次倒计时
setInterval(function () {
// 获取当前时间
var now = new Date();
// 获取未来结束时间
var end = new Date('2021/12/31 23:59:59');
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();
// 获取各个时间单位的值
var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
var minutes = parseInt(leftTime / 1000 / 60 % 60);
var seconds = parseInt(leftTime / 1000 % 60);
// 将时间值更新到页面上
document.getElementById('countdown-days').innerHTML = days;
document.getElementById('countdown-hours').innerHTML = hours;
document.getElementById('countdown-minutes').innerHTML = minutes;
document.getElementById('countdown-seconds').innerHTML = seconds;
}, 1000); // 每隔一秒更新一次
</script>
</body>
</html>
在上面的代码中，我们使用了setInterval()函数，每隔一秒钟自动更新一次倒计时。
示例2：滚动带动态效果的倒计时展示
下面是实现滚动带动态效果的倒计时展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动带动态效果的倒计时展示</title>
<style>
#countdown {
height: 80px;
overflow: hidden;
background-color: #f5f5f5;
position: relative;
}
.countdown-item {
width: 10%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: #fff;
box-shadow: inset 0 0 3px #ccc;
transition: all .3s ease;
}
.countdown-item:first-child {
left: 0;
}
.countdown-item:nth-child(2) {
left: 10%;
}
.countdown-item:nth-child(3) {
left: 20%;
}
.countdown-item:nth-child(4) {
left: 30%;
}
.countdown-item:nth-child(5) {
left: 40%;
}
.countdown-item:nth-child(6) {
left: 50%;
}
.countdown-item:nth-child(7) {
left: 60%;
}
.countdown-item:nth-child(8) {
left: 70%;
}
.countdown-item:nth-child(9) {
left: 80%;
}
.countdown-item:last-child {
right: 0;
}
.countdown-item-num {
font-size: 40px;
display: block;
line-height: 80px;
text-align: center;
color: #007bff;
}
.countdown-item-text {
font-size: 14px;
color: #333;
text-align: center;
margin-top: 10px;
display: block;
}
</style>
</head>
<body>
<!-- 倒计时展示区域 -->
<div id="countdown">
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-days"></span>
<span class="countdown-item-text">天</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-hours"></span>
<span class="countdown-item-text">时</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-minutes"></span>
<span class="countdown-item-text">分</span>
</div>
<div class="countdown-item">
<span class="countdown-item-num" id="countdown-seconds"></span>
<span class="countdown-item-text">秒</span>
</div>
<div class="countdown-item"></div>
<div class="countdown-item"></div>
<div class="countdown-item"></div>
<div class="countdown-item"></div>
<div class="countdown-item"></div>
</div>
<script>
// 获取当前时间
var now = new Date();
// 获取未来结束时间
var end = new Date('2021/12/31 23:59:59');
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();
// 更新倒计时
updateCountdown(leftTime);
// 每隔一秒自动更新倒计时
setInterval(function () {
// 获取当前时间
var now = new Date();
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();
// 更新倒计时
updateCountdown(leftTime);
}, 1000);
// 更新倒计时
function updateCountdown(leftTime) {
// 获取各个时间单位的值
var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
var minutes = parseInt(leftTime / 1000 / 60 % 60);
var seconds = parseInt(leftTime / 1000 % 60);
// 将时间值更新到页面上
document.getElementById('countdown-days').innerHTML = formatNumber(days);
document.getElementById('countdown-hours').innerHTML = formatNumber(hours);
document.getElementById('countdown-minutes').innerHTML = formatNumber(minutes);
document.getElementById('countdown-seconds').innerHTML = formatNumber(seconds);
// 更新滚动动画
updateAnimate();
}
// 更新滚动动画
function updateAnimate() {
var items = document.querySelectorAll('.countdown-item');
items.forEach(function (item) {
item.style.transform = '';
var numEl = item.querySelector('.countdown-item-num');
var num = parseInt(numEl.innerHTML);
var height = item.offsetHeight;
numEl.style.transform = 'translateY(' + (-num * height) + 'px)';
});
}
// 数据格式化，将一位数值前补0
function formatNumber(num) {
return num < 10 ? '0' + num : num;
}
</script>
</body>
</html>
在上面的代码中，我们使用了CSS样式来将倒计时表示成一个滚动带动态效果的倒计时展示。在JavaScript中，我们用了两个函数：updateCountdown()和updateAnimate()来实现每秒钟更新倒计时和滚动动画的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一个不错的js html页面倒计时可精确到秒 - Python技术站
微信扫一扫 
支付宝扫一扫 