2016-12-08 5 views
2

Ich möchte einen jQuery Countdown-Timer erstellen, ich habe versucht, wie der folgende Code, aber es funktioniert nicht.Was mache ich?jQuery Countdown-Timer für Minuten und Sekunden

DEMO:https://jsfiddle.net/tbosn210/

var interval = setInterval(function() { 
 
    
 
    var timer2 = $("5:01"); 
 
    var timer = timer2.split(':'); 
 
    //by parsing integer, I avoid all extra string processing 
 
    var minutes = parseInt(timer[0],10); 
 
    var seconds = parseInt(timer[1],10); 
 
    --seconds; 
 
    minutes = (seconds < 0) ? --minutes : minutes; 
 
    if (minutes < 0) clearInterval(interval); 
 
    seconds = (seconds < 0) ? 59 : seconds; 
 
    seconds = (seconds < 10) ? '0' + seconds : seconds; 
 
    //minutes = (minutes < 10) ? minutes : minutes; 
 
    $('.countdown').html(minutes + ':' + seconds); 
 
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"></div>

Antwort

8

aus setInterval Funktion Bewegen Sie timer2 Erklärung, weist neuen Wert der Zeit am Ende der Ausführung Timer2 fortzusetzen.

Arbeits Snippet:

var timer2 = "5:01"; 
 
var interval = setInterval(function() { 
 

 

 
    var timer = timer2.split(':'); 
 
    //by parsing integer, I avoid all extra string processing 
 
    var minutes = parseInt(timer[0], 10); 
 
    var seconds = parseInt(timer[1], 10); 
 
    --seconds; 
 
    minutes = (seconds < 0) ? --minutes : minutes; 
 
    if (minutes < 0) clearInterval(interval); 
 
    seconds = (seconds < 0) ? 59 : seconds; 
 
    seconds = (seconds < 10) ? '0' + seconds : seconds; 
 
    //minutes = (minutes < 10) ? minutes : minutes; 
 
    $('.countdown').html(minutes + ':' + seconds); 
 
    timer2 = minutes + ':' + seconds; 
 
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"></div>

+0

nehmen auch hier, wie Variable deklarieren in Javascript https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/var, muss Timer2 nicht als jQuery deklariert werden Objekt. –

+0

@AJ was zu tun ist, wenn Zählzeit auch für das Format wie '1: 30: 00' –

+1

@alkavaghela: erstellt ein Beispiel Geige für Sie https://jsfiddle.net/2dL6u5h5/1/ .. PS: Es gibt bessere JavaScript-Funktionen, um dies zu erreichen, aber Sie können dies als Referenz verwenden, Fühlen Sie sich frei zu fragen, ob es irgendwelche Zweifel oder Fragen in Bezug auf diese Logik ... :) –

0
var timer2 = $("5:01"); 
    var timer = timer2.split(':'); 

Sie don t müssen jQuery für String wickeln verwenden. also, vor allem zu beheben:

var timer2 = "5:01"; var timer = timer2.split (':');

und die zweite Sie benötigen 05.01 die Startvariable raus, weil jeder Ihr Intervall Iteration den Startwert auf 5.01 zurückgesetzt

3

var timer2 = "5:01"; 
 
var interval = setInterval(function() { 
 

 

 
    var timer = timer2.split(':'); 
 
    //by parsing integer, I avoid all extra string processing 
 
    var minutes = parseInt(timer[0], 10); 
 
    var seconds = parseInt(timer[1], 10); 
 
    --seconds; 
 
    minutes = (seconds < 0) ? --minutes : minutes; 
 
    seconds = (seconds < 0) ? 59 : seconds; 
 
    seconds = (seconds < 10) ? '0' + seconds : seconds; 
 
    //minutes = (minutes < 10) ? minutes : minutes; 
 
    $('.countdown').html(minutes + ':' + seconds); 
 
    if (minutes < 0) clearInterval(interval); 
 
    //check if both minutes and seconds are 0 
 
    if ((seconds <= 0) && (minutes <= 0)) clearInterval(interval); 
 
    timer2 = minutes + ':' + seconds; 
 
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"></div>
Die obige Snippet wird ein Countdown zur Verfügung stellen bis 0:00 Uhr Die clearInterval Funktion sollte am Ende aufgerufen werden, indem überprüft wird, ob Minuten und Sekunden beide 0 als ihren Wert enthalten oder nicht.

0

var timer2 = "5:01"; 
 
var interval = setInterval(function() { 
 

 

 
    var timer = timer2.split(':'); 
 
    //by parsing integer, I avoid all extra string processing 
 
    var minutes = parseInt(timer[0], 10); 
 
    var seconds = parseInt(timer[1], 10); 
 
    --seconds; 
 
    minutes = (seconds < 0) ? --minutes : minutes; 
 
    if (minutes < 0) clearInterval(interval); 
 
    seconds = (seconds < 0) ? 59 : seconds; 
 
    seconds = (seconds < 10) ? '0' + seconds : seconds; 
 
    //minutes = (minutes < 10) ? minutes : minutes; 
 
    $('.countdown').html(minutes + ':' + seconds); 
 
    timer2 = minutes + ':' + seconds; 
 
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"></div>

wie kann man Halt in oo oo statt -1 machen: 59

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
var minutes = 1, seconds = 59; 
 
    jQuery(function(){ 
 
    jQuery("span.countdown").html(minutes + ":" + seconds); 
 
    var count = setInterval(function(){ if(parseInt(minutes) < 0) { clearInterval(count); } else {jQuery("span.countdown").html(minutes + ":" + seconds); if(seconds == 0) { minutes--; if(minutes < 10) minutes = "0"+minutes; seconds = 59;} seconds--; if(seconds < 10) minutes = "0"+seconds;} }, 1000); 
 
    }) 
 
</script> 
 
<span class="countdown"></span>

Verwandte Themen