JavaScript 倒数计时器 - 截止日期

Question

I have found a code for a countdown that should restart counting after a certain deadline was reached. However, the countdown always starts to count from 15 days, even if I put an other deadline. Here is the code:

 var deadline = Date.parse('28 Jan 2019 17:00:00 GMT'); 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 }; } 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); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline);

 body{ text-align: center; background: #00ECB9; font-family: sans-serif; font-weight: 100; } h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } #clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext{ padding-top: 5px; font-size: 16px; }

 <h1>Countdown Clock</h1> <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>

Thanks!

Answer 1

You need to remove the deadline variable in the bottom and update the top calculation of deadline.

I have updated it here.

var deadline = new Date(Date.parse('30 Jan 2019 17:00:00 GMT'));

https://codepen.io/anon/pen/WPxEKW?editors=1010

Answer 2

Check: https://codepen.io/anon/pen/EryvQK?editors=1010

As @Clyde Lobo already mentioned you need to edit

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

at the bottom of the script since JS is interpreting code from top to bottom.

Remove the deadline variable at the top of your script since it gets overwritten by the bottom one.

15 are the days. 24 are the hours. 60 are the minutes. 60 are the seconds. Don't touch the 1000.