Countdown wird zurückgesetzt, wenn ich die Seite neu lade - muss sie auf ein Datum setzen

Question

Ich habe ein Countdown-Skript, das neu startet, wenn ich die Seite neu lade. Ich muss es bis zu einem bestimmten Datum einrichten.

Hier Link Ansicht Countdown-Timer und Sie können auch und es oder sehen Codes verwenden herunterladen: https://timer.craftovdvlp.club/

Und hier ist Skript:

$(document).ready(function() { 
 

 
    $('#countdown2').ClassyCountdown({ 
 
    end: '1388468325', 
 
    now: '1378441323', 
 
    labels: true, 
 
    style: { 
 
     element: "", 
 
     textResponsive: .5, 
 
     days: { 
 
     gauge: { 
 
      thickness: .01, 
 
      bgColor: "rgba(0,0,0,0.05)", 
 
      fgColor: "#1abc9c" 
 
     }, 
 
     textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' 
 
     }, 
 
     hours: { 
 
     gauge: { 
 
      thickness: .01, 
 
      bgColor: "rgba(0,0,0,0.05)", 
 
      fgColor: "#2980b9" 
 
     }, 
 
     textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' 
 
     }, 
 
     minutes: { 
 
     gauge: { 
 
      thickness: .01, 
 
      bgColor: "rgba(0,0,0,0.05)", 
 
      fgColor: "#8e44ad" 
 
     }, 
 
     textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' 
 
     }, 
 
     seconds: { 
 
     gauge: { 
 
      thickness: .01, 
 
      bgColor: "rgba(0,0,0,0.05)", 
 
      fgColor: "#f39c12" 
 
     }, 
 
     textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' 
 
     } 
 

 
    }, 
 
    onEndCallback: function() { 
 
     console.log("Time out!"); 
 
    } 
 
    }); 
 

 
});

<link href="http://timer.craftovdvlp.club/css/jquery.classycountdown.css" rel="stylesheet" /> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="http://timer.craftovdvlp.club/js/jquery.classycountdown.js"></script> 
 

 
<script src="http://timer.craftovdvlp.club/js/jquery.knob.js"></script> 
 
<script src="http://timer.craftovdvlp.club/js/jquery.throttle.js"></script> 
 

 
<div class="container"> 
 

 
    <div id="countdown2" class="ClassyCountdownDemo"></div> 
 

 
</div>

P. S. Wenn jemand hat oder wissen, Link der schönen Linie kreisförmige Countdown-Timer, werde ich sehr dankbar sein für Hilfe)

Answer 1

Immer wenn Sie eine Seite neu laden, wird der Speicher zurückgesetzt. Versuchen Sie, etwas Persistentes wie eine cookie zu verwenden, die das Enddatum des Timers speichert.

Die now sollte auch jedes Mal neu erstellt werden, wenn Sie die Seite neu laden, wie in @Himanshu Upadhyays Antwort und in @ Santis Kommentar angegeben.

I.E.

var end = document.cookie.replace(/(?:(?:^|.*;\s*)timerEnd\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 
end = end || '' + Date.now() + 15 * 60 * 1000; // 15 minutes 
document.cookie='timerEnd=' end; 
$('#countdown2').ClassyCountdown({ 
    end: end, 
    now: '' + Date.now(), 
    // ...etc 

Answer 2

aktuelle Zeitvariable Sichern Sie sich jetzt wie folgt aus:

$(document).ready(function() { 
    var d = new Date(); 
    var now = d.getTime(); 

    $('#countdown2').ClassyCountdown({ 
     end: '1388468325', 
     now: now, 
     .... 
    }); 
});