使用当前时间并倒计时到小时，并重置到下一小时倒计时

Question

我更多的是一个php程序员，Java脚本编程对我而言仍然是新的。有许多反指令脚本和问题，但没有我可以找到的以下内容。我使用下面的脚本作为我的基地脚本：Styled JavaScript Countdown Clock

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{ 
 
\t text-align: center; 
 
\t background: #00ECB9; 
 
    font-family: sans-serif; 
 
    font-weight: 100; 
 
} 
 

 
h1{ 
 
    color: #396; 
 
    font-weight: 100; 
 
    font-size: 40px; 
 
    margin: 40px 0px 20px; 
 
} 
 

 
#clockdiv{ 
 
\t font-family: sans-serif; 
 
\t color: #fff; 
 
\t display: inline-block; 
 
\t font-weight: 100; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
} 
 

 
#clockdiv > div{ 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
\t background: #00BF96; 
 
\t display: inline-block; 
 
} 
 

 
#clockdiv div > span{ 
 
\t padding: 15px; 
 
\t border-radius: 3px; 
 
\t background: #00816A; 
 
\t display: inline-block; 
 
} 
 

 
.smalltext{ 
 
\t padding-top: 5px; 
 
\t 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>

我想利用当前的时间，让它倒计时接下来的一个小时，在其上会复位并重新开始。所以在一小时内它将是00:00（分钟/秒），然后重新设定从59:59再次倒数。请帮忙！！！

Answer 1

通过从3600减去当前的分钟* 60 +秒，您可以获得下一个整小时的时间。我们增加100天，倒计时将在接下来的100天内运行。

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); 
 

 
    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 now = Date.parse(new Date()); 
 
var seconds = Math.floor((now/1000) % 60); 
 
var minutes = Math.floor((now/1000/60) % 60); 
 
var left_to_hour = 60 * 60 * 1000 - (minutes * 60 + seconds) * 1000; 
 
// add 100 days 
 
var deadline = new Date(now + left_to_hour + 100 * 24 * 60 * 60 * 1000); 
 

 
initializeClock('clockdiv', deadline);

body { 
 
\t text-align: center; 
 
\t background: #00ECB9; 
 
    font-family: sans-serif; 
 
    font-weight: 100; 
 
} 
 

 
h1 { 
 
    color: #396; 
 
    font-weight: 100; 
 
    font-size: 40px; 
 
    margin: 40px 0px 20px; 
 
} 
 

 
#clockdiv{ 
 
\t font-family: sans-serif; 
 
\t color: #fff; 
 
\t display: inline-block; 
 
\t font-weight: 100; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
} 
 

 
#clockdiv > div { 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
\t background: #00BF96; 
 
\t display: inline-block; 
 
} 
 

 
#clockdiv div > span { 
 
\t padding: 15px; 
 
\t border-radius: 3px; 
 
\t background: #00816A; 
 
\t display: inline-block; 
 
} 
 

 
.smalltext { 
 
\t padding-top: 5px; 
 
\t font-size: 16px; 
 
}

<h1>Countdown Clock</h1> 
 
<div id="clockdiv"> 
 
    <div> 
 
    <span class="minutes"></span> 
 
    <div class="smalltext">Minutes</div> 
 
    </div> 
 
    <div> 
 
    <span class="seconds"></span> 
 
    <div class="smalltext">Seconds</div> 
 
    </div> 
 
</div>

Answer 2

你只需要修改getTimeRemaining剩余的功能，所以它返回分秒下一整整一个小时，如：

/* Return minutes and seconds to next hour 
 
** @returns {Object} minutes: minutes remaining 
 
**     seconds: seconds remaining 
 
*/ 
 
function getTimeRemaining() { 
 
    var t = Date.now(); 
 
    var seconds = (60 - Math.floor(t % 6e4/1e3)) % 60; 
 
    var minutes = 60 - Math.ceil(t % 3.6e6/6e4) + (seconds? 0:1); 
 
    return { 
 
    'minutes': ('0' + minutes).slice(-2), 
 
    'seconds': ('0' + seconds).slice(-2)  }; 
 
} 
 

 
// Simple show remaining function 
 
function showRemaining() { 
 
    var r = getTimeRemaining(); 
 
    document.getElementById('clock').textContent = (r.minutes + ':' + ('0' + r.seconds).slice(-2)); 
 
    // Run again just after next full second 
 
    setTimeout(showRemaining, 1020 - (Date.now() % 1000)); 
 
} 
 

 
showRemaining();

<span id="clock"></span>