在线获取的JavaScript倒计时器代码无法倒计时,附修复后可用代码
嘿,终于搞定这个倒计时器的问题了!特别感谢所有留言给我提供帮助的朋友们🙏。下面是已经可以正常运行的倒计时器核心代码片段:
function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; }
注:原代码里的return部分被截断了,我补全了常规的返回字段,你可以根据自己的需求调整返回的属性。
如果要让这个倒计时器真正在页面上动起来,还需要配合DOM更新的逻辑,比如下面这段初始化和更新函数:
function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); // 补零处理,让数字显示更美观 daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); // 倒计时结束后停止更新 if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); // 先执行一次避免初始延迟 var timeinterval = setInterval(updateClock, 1000); }
对应的HTML结构可以参考这样写:
<div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div>
最后只需要设置好倒计时的结束时间,调用初始化函数就能运行了:
// 示例:设置从当前时间往后7天作为倒计时结束时间 var deadline = new Date(Date.parse(new Date()) + 7 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline);
内容的提问来源于stack exchange,提问作者Viktor
相关产品推荐
相关产品推荐

