Benutze die aktuelle Zeit und zähle runter bis zur Stunde und setze auf die nächste Stunde zurück Countdown

Question

Ich bin mehr ein PHP Programmierer und Java Scripting ist noch neu für mich. Es gibt eine Menge von Counter-Skripten und Fragen, aber nichts, was ich finden kann, um das Folgende zu tun. Ich benutze das folgende Skript als meine Basis-Skript: 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>

Ich möchte die aktuelle Zeit nutzen und lassen Sie es auf die nächste Stunde zählen, auf dem es wieder zurückgesetzt und starten . Also zur vollen Stunde wird es 00:00 (Min/Sek) sein und dann zurückgestellt, um wieder von 59:59 herunterzuzählen. Bitte helfen !!!

Answer 1

Durch Subtrahieren der aktuellen Minuten * 60 + Sekunden von 3600 erhalten Sie die Zeit bis zur nächsten vollen Stunde. Fügen wir 100 Tage hinzu, damit der Countdown für die nächsten 100 Tage funktioniert.

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

Sie müssen nur die getTimeRemaining verbleibende Funktion ändern, so dass es die Minuten und Sekunden auf die nächste volle Stunde gibt, zB:

/* 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>