JavaScript实现前端倒计时效果是一种常见的网页交互形式，通常用于倒计时活动、秒杀活动等。
实现思路
- 获取当前时间和目标时间
- 计算剩余时间，并转换成时、分、秒
- 动态更新页面显示剩余时间
具体实现
获取当前时间和目标时间
// 获取当前时间和目标时间
const now = new Date();
const target = new Date('2022-01-01 00:00:00');
计算剩余时间并转换
// 计算剩余时间并转换成时、分、秒
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
动态更新页面
// 动态更新页面
const hourElement = document.querySelector('#hour');
const minuteElement = document.querySelector('#minute');
const secondElement = document.querySelector('#second');
hourElement.innerHTML = hours;
minuteElement.innerHTML = minutes;
secondElement.innerHTML = seconds;
setInterval(() => {
const now = new Date();
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
hourElement.innerHTML = hours;
minuteElement.innerHTML = minutes;
secondElement.innerHTML = seconds;
}, 1000);
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时示例1</title>
<style>
span {
padding: 5px;
margin-right: 5px;
background-color: #333;
color: #fff;
font-size: 24px;
}
</style>
</head>
<body>
<div>距离2022年元旦还有</div>
<div>
<span id="hour"></span>时
<span id="minute"></span>分
<span id="second"></span>秒
</div>
<script>
const now = new Date();
const target = new Date('2022-01-01 00:00:00');
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const hourElement = document.querySelector('#hour');
const minuteElement = document.querySelector('#minute');
const secondElement = document.querySelector('#second');
hourElement.innerHTML = hours;
minuteElement.innerHTML = minutes;
secondElement.innerHTML = seconds;
setInterval(() => {
const now = new Date();
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
hourElement.innerHTML = hours;
minuteElement.innerHTML = minutes;
secondElement.innerHTML = seconds;
}, 1000);
</script>
</body>
</html>
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时示例2</title>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 10px;
background-color: #ccc;
font-size: 36px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<span id="hour"></span>
<span id="minute"></span>
<span id="second"></span>
</div>
<script>
const now = new Date();
const target = new Date('2022-01-01 00:00:00');
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const hourElement = document.querySelector('#hour');
const minuteElement = document.querySelector('#minute');
const secondElement = document.querySelector('#second');
hourElement.innerHTML = ('0' + hours).slice(-2) + ':';
minuteElement.innerHTML = ('0' + minutes).slice(-2) + ':';
secondElement.innerHTML = ('0' + seconds).slice(-2);
setInterval(() => {
const now = new Date();
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
hourElement.innerHTML = ('0' + hours).slice(-2) + ':';
minuteElement.innerHTML = ('0' + minutes).slice(-2) + ':';
secondElement.innerHTML = ('0' + seconds).slice(-2);
}, 1000);
</script>
</body>
</html>
以上就是“JavaScript实现前端倒计时效果”的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现前端倒计时效果 - Python技术站
微信扫一扫 
支付宝扫一扫 