1

JavaScriptのカウントダウンタイマーコード. しかし、ページが更新されると、再び再起動しています。再起動してもタイマーを継続してほしい。

私は初心者なので、この問題に対処するのを手伝ってください。これは私の最初のアプリケーションです。あなたからの詳細な入力が必要です。

`
<body>
<div id="divCounter"></div>
<script type="text/javascript">

var hoursleft = 0;
var minutesleft = 35;           // you can change these values to any value greater than 0
var secondsleft = 0;

var finishedtext = "Countdown finished!" // text that appears when the countdown reaches 0
var end = new Date();

end.setMinutes(end.getMinutes()+minutesleft);
end.setSeconds(end.getSeconds()+secondsleft);


if(localStorage.getItem("counter")){

    var value = localStorage.getItem("counter");

}else{
  var value = 0;
}


var counter = function (){


    var now = new Date();
var diff = end - now;
diff = new Date(diff);

var sec = diff.getSeconds();
var min = diff.getMinutes();

if (min < 10){
    min = "0" + min;
}
if (sec < 10){
    sec = "0" + sec;
}

if(now >= end){
    clearTimeout(timerID);
    document.getElementById('divCounter').innerHTML = finishedtext;
}
else{
    var value = min + ":" + sec;
//document.getElementById('divCounter').innerHTML = min + ":" + sec;
localStorage.setItem("counter", JSON.stringify(value));
}      

 // timerID = setTimeout("cd()", 1000);
// value = JSON.parse(localStorage.getItem("counter"));
//$('#divCounter').append(value);
document.getElementById('divCounter').innerHTML = value; 
 }





 var interval = setInterval(function (){counter();}, 1000);
 </script>
 </body>
 `
4

5 に答える 5

1

好きな時間のカウントダウンタイマー。ページを更新しても再起動しません。

<body>
<div id="divCounter"></div>


<script>
//var hoursleft = 0;
var minutesleft = 0; //give minutes you wish
var secondsleft = 30; // give seconds you wish
var finishedtext = "Countdown finished!";
var end1;
if(localStorage.getItem("end1")) {
end1 = new Date(localStorage.getItem("end1"));
} else {
end1 = new Date();
end1.setMinutes(end1.getMinutes()+minutesleft);
end1.setSeconds(end1.getSeconds()+secondsleft);

}
var counter = function () {
var now = new Date();
var diff = end1 - now;

diff = new Date(diff);

var milliseconds = parseInt((diff%1000)/100)
    var sec = parseInt((diff/1000)%60)
    var mins = parseInt((diff/(1000*60))%60)
    //var hours = parseInt((diff/(1000*60*60))%24);

if (mins < 10) {
    mins = "0" + mins;
}
if (sec < 10) { 
    sec = "0" + sec;
}     
if(now >= end1) {     
    clearTimeout(interval);
   // localStorage.setItem("end", null);
     localStorage.removeItem("end1");
     localStorage.clear();
    document.getElementById('divCounter').innerHTML = finishedtext;
     if(confirm("TIME UP!"))
     window.location.href= "timeup.php";
} else {
    var value = mins + ":" + sec;
    localStorage.setItem("end1", end1);
    document.getElementById('divCounter').innerHTML = value;
}
}
var interval = setInterval(counter, 1000);
</script>
</body>
于 2015-06-02T08:06:34.343 に答える
0

これが完成した、完全に機能する、最適化されたコードです。今すぐうまくいくはずです！

<body>
<div id="divCounter"></div>
<script>
var hoursleft = 0;
var minutesleft = 35;
var secondsleft = 0; 
var finishedtext = "Countdown finished!";
var end;
if(localStorage.getItem("end")) {
    end = new Date(localStorage.getItem("end"));
} else {
    end = new Date();
    end.setMinutes(end.getMinutes()+minutesleft);
    end.setSeconds(end.getSeconds()+secondsleft);
}
var counter = function () {
    var now = new Date();
    var diff = end - now;
    diff = new Date(diff);
    var sec = diff.getSeconds();
    var min = diff.getMinutes(); 
    if (min < 10) {
        min = "0" + min;
    }
    if (sec < 10) { 
        sec = "0" + sec;
    }     
    if(now >= end) {     
        clearTimeout(interval);
        localStorage.setItem("end", null)
        document.getElementById('divCounter').innerHTML = finishedtext;
    } else {
        var value = min + ":" + sec;
        localStorage.setItem("end", end);
        document.getElementById('divCounter').innerHTML = value;
    }
}
var interval = setInterval(counter, 1000);
</script>
</body>
于 2015-05-28T18:09:39.137 に答える
0

ここでやりたいことは、カウントダウンする日付/時刻を設定し、現在のユーザーの日付/時刻を取得してから、カウントダウンするまでの差をワークアウトすることです。

次のようなことは、あなたを正しい方向に押し進めるのに役立ちます。

var date  = new Date(Date.UTC(2015, 5, 28, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;
于 2015-05-28T06:06:29.060 に答える
0

タイマーの値を Cookie に保存する必要があります。

更新後、Cookie が設定されているかどうかを確認し、設定されている場合は値を取得してタイマーの初期時間として設定し、それ以外の場合は 0 から開始します

于 2015-05-28T06:05:52.150 に答える
0

ローカルストレージから値変数を読み込んでいますが、実際には終了時刻と現在時刻を古い値に設定していないため、値変数もリセットされてリセットされます。これらの値もメモリに保存し、ページを更新するときにロードする必要があります。

于 2015-05-28T06:12:44.333 に答える