ページをリロードするとカウントダウンがリセットされます - 日付まで設定する必要があります

Question

私はページをリロードすると新たに起動するカウントダウンスクリプトを持っています。私はいくつかの日付まで働くように設定する必要があります。ここで

は、カウントダウンタイマービューのリンクであり、また、あなたがダウンロードして使用してか、コードを見ることができます：

$(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.：https://timer.craftovdvlp.club/

そして、ここではスクリプトですもし誰かが美しい線円形のカウントダウンタイマーのリンクを持っているか知っていれば、私は助けに非常に感謝します）

Answer 1

ページをリロードするたびに、メモリがリセットされます。タイマの終了日を格納するcookieのような永続的なものを使用してみてください。

nowは、@Himanshu Upadhyayの答えと@ Santiのコメントに記載されているように、ページをリロードするたびに作成する必要があります。

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

このように現在の時間変数を取得します。

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

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