Ik wilde alleen vragen hoe je de eenvoudigste afteltimer kunt maken.
Er zal een zin op de site staan met de tekst:
“De inschrijving sluit over 05:00 minuten!”
Wat ik dus wil doen, is een eenvoudige js-afteltimer maken die van “05:00” naar “00:00” gaat en vervolgens teruggaat naar “05:00” zodra deze is afgelopen.
Ik heb eerder wat antwoorden doorgenomen, maar ze lijken allemaal te intens (datumobjecten, enz.) voor wat ik wil doen.
Antwoord 1, autoriteit 100%
Ik heb twee demo’s, een met jQueryen een zonder. Geen van beide gebruiken datumfuncties en zijn ongeveer zo eenvoudig als het maar kan.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>Antwoord 2, autoriteit 5%
Als je een echte timer wilt, moet je het datumobject gebruiken.
Bereken het verschil.
Maak uw tekenreeks op.
window.onload=function(){
var start=Date.now(),r=document.getElementById('r');
(function f(){
var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
if(diff>3e5){
start=Date.now()
}
setTimeout(f,1e3);
})();
}
Voorbeeld
Jsfiddle
niet zo nauwkeurige timer
var time=5*60,r=document.getElementById('r'),tmp=time;
setInterval(function(){
var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
tmp!=0||(tmp=time);
},1000);
JsFiddle
Antwoord 3, autoriteit 4%
Je kunt eenvoudig een timerfunctie maken door setInterval te gebruiken. Hieronder staat de code waarmee je de timer kunt maken.
http://jsfiddle.net/ayyadurai/GXzhZ/1/
window.onload = function() {
var minute = 5;
var sec = 60;
setInterval(function() {
document.getElementById("timer").innerHTML = minute + " : " + sec;
sec--;
if (sec == 00) {
minute --;
sec = 60;
if (minute == 0) {
minute = 5;
}
}
}, 1000);
}Registration closes in <span id="timer">05:00<span> minutes!