Countdown-Timer: Timer muss automatisch von 3:00 nach Erreichen von 0 Minuten für unbegrenzte Zeiten starten

Question

Benötigen Sie einen Countdown-Timer, der von 03: 00,02: 59 beginnt ... sobald er 0:00 erreicht, sollte der Timer automatisch starten Zurücksetzen auf 03:00 und diese Logik sollte unendlich sein. Nimm einfach an, dass Noone die Kontrolle über diese Logik haben sollte, um sie zu stoppen.

Ich blätterte und durchlief einen Javascript-Code. Im Fall der Verwendung nur von Javascript-Funktionen, wenn der Browser des Browsers des Endanwenders aktualisiert wird, wird der Zähler auf 3:00 zurückgesetzt. Dies sollte nicht passieren.

Also ich benutze JS, Jquery, PHP, Mysql mit der Hoffnung, dass ich Lösungen finden kann, indem ich Startzeit, Endzeit, Intreval Duration in der Datenbank halte (Sorry für die Ausarbeitung nicht, aber ich nehme an, dass dies ein üblicher Anwendungsfall ist und die Leute können was verstehen Ich stehe hier).

Ich suche immer noch nach Lösungen. Hilf mir bitte dabei.

BTW, ich gucke nicht Antworten für Countdowntimer Problem, sobald Timer auf 0:00 Job für Countdown-Timer fertig ist. Ich habe Ideen dafür.

Answer 1

können Sie einen Timer erstellen, indem Sie diese u müssen jetzt

// 15 days from now! 
 
var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000); 
 
$('#clock').countdown(date, function(event) 
 
{ 
 
    $(this).html(event.strftime('%D days %H:%M:%S')); 
 
});

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.4.2/pure-min.css"> 
 
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,300italic"> 
 
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald"> 
 
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/syntax.css"> 
 
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/main.css"> 
 
<script src="//code.jquery.com/jquery.js"></script> 
 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> 
 
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.1.0/dist/jquery.countdown.min.js"></script> 
 

 
<div class="example-base"> 
 
    Limited Time Only! 
 
    <span id="clock"></span> 
 
</div>

Weg-, was es mit PHP tun zu integrieren ist.

Wenn die Seite geladen ist, müssen Sie set timeouts für den JS-Code.

So, dann Code JS wie this-

setTimeout(function() 
{ 
    //JS code for timer 
    var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000); 
    $('#clock').countdown(date, function(event) 
    { 
     $(this).html(event.strftime('%D days %H:%M:%S')); 
    }); 
} , 1000); 

wäre hier die Zeit auf 1 Sekunde eingestellt ist, aber in Ihrem Fall sollte Zeit vom Server kommen, was so sollten Sie tun, ist so etwas wie dies in PHP, um Sekunden übrig zu erhalten -

$timeCurrent = strtotime('now'); 
$timeFutre = strtotime(date("Y-m-d").' 03:00:00'); 
$differenceInSeconds = $timeSecond - $timeFirst; 

Jetzt sollten Sie es in JS verwenden.

U kann entweder AJAX verwenden und die Zeit einstellen remaing oder kann einfach PHP echo wie this-

setTimeout(function() 
{ 
    //JS code for timer 
    var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000); 
    $('#clock').countdown(date, function(event) 
    { 
     $(this).html(event.strftime('%D days %H:%M:%S')); 
    }); 
} , 1000* <?php 
       $timeCurrent = strtotime('now'); 
       $timeFutre = strtotime(date("Y-m-d").' 03:00:00'); 
       $differenceInSeconds = $timeSecond - $timeFirst; 
       echo $differenceInSeconds; 
      ?>); 

Denken Sie Ihre vollständige Antwort.