0

私は検索して検索してきましたが、ページをリロードした後、このスクリプトのリセットを停止できませんでした。

スクリプトは x 時間ごとにタイマーをカウントダウンします。問題は、ページがリロードされるたびにタイマーがリセットされることです。

ページがリロードされてもカウントダウンを続ける方法を教えてください。

でタイマーを呼び出します。タイマー 8 の例: >div... etc id="timeLeft8"

    <script type="text/javascript">
    var events = new Array();

    events[1]={name: 'Blood Castle:', startUp: new Array(
        {hour:0,minute:25},
        {hour:2,minute:25},
        {hour:4,minute:25},
        {hour:6,minute:25},
        {hour:8,minute:25},
        {hour:10,minute:25},
        {hour:12,minute:25},
        {hour:14,minute:25},
        {hour:16,minute:25},
        {hour:18,minute:25},
        {hour:20,minute:25},
        {hour:22,minute:25}
    )}

    events[2]={name: 'Devil Square:', startUp: new Array(
        {hour:1,minute:55},
        {hour:3,minute:55},
        {hour:5,minute:55},
        {hour:7,minute:55},
        {hour:9,minute:55},
        {hour:11,minute:55},
        {hour:13,minute:55},
        {hour:15,minute:55},
        {hour:17,minute:55},
        {hour:19,minute:55},
        {hour:21,minute:55},
        {hour:23,minute:55}
    )}

    events[3]={name: 'Chaos Castle:', startUp: new Array(
        {hour:0,minute:55},
        {hour:2,minute:55},
        {hour:4,minute:55},
        {hour:6,minute:55},
        {hour:8,minute:55},
        {hour:10,minute:55},
        {hour:12,minute:55},
        {hour:14,minute:55},
        {hour:16,minute:55},
        {hour:18,minute:55},
        {hour:20,minute:55},
        {hour:22,minute:55}
    )}

    events[4]={name: 'Red Dragon:', startUp: new Array(
        {hour:0,minute:0},
        {hour:2,minute:0},
        {hour:4,minute:0},
        {hour:6,minute:0},
        {hour:8,minute:0},
        {hour:10,minute:0},
        {hour:12,minute:0},
        {hour:14,minute:0},
        {hour:16,minute:0},
        {hour:18,minute:0},
        {hour:20,minute:0},
        {hour:22,minute:0}
    )}

    events[5]={name: 'Gold Invasion:', startUp: new Array(
        {hour:0,minute:0},
        {hour:2,minute:0},
        {hour:4,minute:0},
        {hour:6,minute:0},
        {hour:8,minute:0},
        {hour:10,minute:0},
        {hour:12,minute:0},
        {hour:14,minute:0},
        {hour:16,minute:0},
        {hour:18,minute:0},
        {hour:20,minute:0},
        {hour:22,minute:0}
    )}

    events[6]={name: 'White Wizard:', startUp: new Array(
        {hour:0,minute:0},
        {hour:2,minute:0},
        {hour:4,minute:0},
        {hour:6,minute:0},
        {hour:8,minute:0},
        {hour:10,minute:0},
        {hour:12,minute:0},
        {hour:14,minute:0},
        {hour:16,minute:0},
        {hour:18,minute:0},
        {hour:20,minute:0},
        {hour:22,minute:0}
    )}

    events[7]={name: 'Blue:', startUp: new Array(
        {hour:0,minute:40},
        {hour:1,minute:40},
        {hour:2,minute:40},
        {hour:3,minute:40},
        {hour:4,minute:40},
        {hour:5,minute:40},
        {hour:6,minute:40},
        {hour:7,minute:40},
        {hour:8,minute:40},
        {hour:9,minute:40},
        {hour:10,minute:40},
        {hour:11,minute:40},
        {hour:12,minute:40},
        {hour:13,minute:40},
        {hour:14,minute:40},
        {hour:15,minute:40},
        {hour:16,minute:40},
        {hour:17,minute:40},
        {hour:18,minute:40},
        {hour:19,minute:40},
        {hour:20,minute:40},
        {hour:21,minute:40},
        {hour:22,minute:40},
        {hour:23,minute:40},
        {hour:24,minute:40}
    )}

    events[7]={name: 'Hide&Seek:', startUp: new Array(
        {hour:0,minute:42},
        {hour:1,minute:22},
        {hour:2,minute:32},
        {hour:3,minute:42},
        {hour:4,minute:52},
        {hour:6,minute:02},
        {hour:7,minute:12},
        {hour:8,minute:22},
        {hour:9,minute:32},
        {hour:10,minute:42},
        {hour:11,minute:52},
        {hour:13,minute:02},
        {hour:14,minute:12},
        {hour:15,minute:22},
        {hour:16,minute:32},
        {hour:17,minute:42},
        {hour:18,minute:52},
        {hour:20,minute:02},
        {hour:21,minute:12},
        {hour:22,minute:22},
        {hour:23,minute:32}
    )}

    events[8]={name: 'Sky:', startUp: new Array(
        {hour:1,minute:5},
        {hour:4,minute:5},
        {hour:7,minute:5},
        {hour:10,minute:5},
        {hour:13,minute:5},
        {hour:16,minute:5},
        {hour:19,minute:5},
        {hour:23,minute:5}
    )}

    events[9]={name: 'Boss Attack:', startUp: new Array(
        {hour:1,minute:50},
        {hour:4,minute:50},
        {hour:7,minute:50},
        {hour:10,minute:50},
        {hour:13,minute:50},
        {hour:16,minute:50},
        {hour:23,minute:50}
    )}


    events[10]={name: 'Happy Hour:', startUp: new Array(
        {hour:5,minute:5},
        {hour:2,minute:5},
        {hour:8,minute:5},
        {hour:11,minute:5},
        {hour:14,minute:5},
        {hour:17,minute:5},
        {hour:20,minute:5},
        {hour:0,minute:5}
    )}

    events[11]={name: 'Hit and Up:', startUp: new Array(
        {hour:0,minute:20},
        {hour:2,minute:20},
        {hour:5,minute:20},
        {hour:8,minute:20},
        {hour:11,minute:20},
        {hour:14,minute:20},
        {hour:20,minute:20}
    )}

    events[12]={name: 'Raklion:', startUp: new Array(
        {hour:0,minute:15},
        {hour:3,minute:15},
        {hour:6,minute:15},
        {hour:9,minute:15},
        {hour:12,minute:15},
        {hour:15,minute:15},
        {hour:18,minute:15},
        {hour:21,minute:15}
    )}

    events[13]={name: 'Moss:', startUp: new Array(
        {hour:3,minute:35},
        {hour:7,minute:35},
        {hour:11,minute:35},
        {hour:15,minute:35},
        {hour:19,minute:35},
        {hour:23,minute:35}
    )}

    events[14]={name: 'Illusion Temple:', startUp: new Array(
        {hour:0,minute:25},
        {hour:1,minute:25},
        {hour:2,minute:25},
        {hour:3,minute:25},
        {hour:4,minute:25},
        {hour:5,minute:25},
        {hour:6,minute:25},
        {hour:7,minute:25},
        {hour:8,minute:25},
        {hour:9,minute:25},
        {hour:10,minute:25},
        {hour:11,minute:25},
        {hour:12,minute:25},
        {hour:13,minute:25},
        {hour:14,minute:25},
        {hour:15,minute:25},
        {hour:16,minute:25},
        {hour:17,minute:25},
        {hour:18,minute:25},
        {hour:19,minute:25},
        {hour:20,minute:25},
        {hour:21,minute:25},
        {hour:22,minute:25},
        {hour:23,minute:25},
        {hour:24,minute:25}
    )}

    events[15]={name: 'Castle Deep:', startUp: new Array(
        {hour:1,minute:25},
        {hour:7,minute:25},
        {hour:13,minute:25},
        {hour:19,minute:25}
    )}

    events[16]={name: 'CryWolf:', startUp: new Array(
        {hour:1,minute:45},
        {hour:4,minute:45},
        {hour:7,minute:45},
        {hour:10,minute:45},
        {hour:13,minute:45},
        {hour:16,minute:20},
        {hour:19,minute:45},
        {hour:22,minute:45}
    )}

    var curTime=1336998502
    var dateTime=1336953600
    function timeLeft(i){
        for(j in events[i].startUp){
            tmp=events[i].startUp[j].hour*3600+events[i].startUp[j].minute*60
            if(dateTime+tmp>curTime){
                return dateTime+tmp-curTime;
            }
        }
        tmp=events[i].startUp[0].hour*3600+events[i].startUp[0].minute*60
        return dateTime+86400+tmp-curTime;
    }

    function getFormatedLeftTime($seconds){
        $second = $seconds % 60;
        $minutes = parseInt(($seconds / 60) % 60);
        $hour =  parseInt(($seconds / 3600) % 24);
        $days = parseInt($seconds / (24 * 3600));

        $ret = '';
        if ($days > 0)
            if ($days == 1) $ret += '1 day ';
            else $ret += $days + ' days ';


        if ($hour > 0){
            if ($hour < 10) $hour = '0' + $hour;
            $ret += $hour + ':';
        }else if ($days > 0) $ret += '00:';

        if($minutes < 10) $minutes = '0' + $minutes;

        $ret += $minutes + ':';

        if ($second < 10) $second = '0' + $second;

        $ret += $second;
        return $ret;

    }

    function updateTimes(){
        curTime++;
        for (i in events){
            document.getElementById("timeLeft"+i).innerHTML=getFormatedLeftTime(timeLeft(i));
        }
    }

    for(i in events)
        document.getElementById("eventList").innerHTML+="<div style='float:right; color: #FFFF00;' id='timeLeft"+i+"'>"+getFormatedLeftTime(timeLeft(i))+"</div><div style=\"color: #00FFFF;\"><strong>"+events[i].name+"</strong></div>";
    setInterval("updateTimes()", 1000);



    </script>
4

3 に答える 3

2

ようこそ、javascriptとhtmlはステートレスで、各ページは新しい日です。

質問にタグを付けましたがcookie、使用しないので...使用してください。
とにかく、そのようなものはクライアント側ではなくサーバー側にあるべきです。

于 2012-05-14T14:09:58.173 に答える
2

カウンター値をローカルストレージに保持しますか？ページが読み込まれると、最初から開始しない場合でも、そこにあるかどうかを確認できます。

このような：

var counter = 0;
if(localStorage.counter) {
    counter = Number(localStorage.counter);
} else {
    counter = 1;
}

次に、カウンターを更新するときに、ストレージに保存します。例：

counter += 1;
localStorage.counter = counter;

わかりました。これはスクリプトに実装されているこの手法です:(どのように動作するのか完全にはわからないことに注意してください！）

<script type="text/javascript">
var events = new Array();

events[1]={name: 'Blood Castle:', startUp: new Array(
    {hour:0,minute:25},
    {hour:2,minute:25},
    {hour:4,minute:25},
    {hour:6,minute:25},
    {hour:8,minute:25},
    {hour:10,minute:25},
    {hour:12,minute:25},
    {hour:14,minute:25},
    {hour:16,minute:25},
    {hour:18,minute:25},
    {hour:20,minute:25},
    {hour:22,minute:25}
)}

events[2]={name: 'Devil Square:', startUp: new Array(
    {hour:1,minute:55},
    {hour:3,minute:55},
    {hour:5,minute:55},
    {hour:7,minute:55},
    {hour:9,minute:55},
    {hour:11,minute:55},
    {hour:13,minute:55},
    {hour:15,minute:55},
    {hour:17,minute:55},
    {hour:19,minute:55},
    {hour:21,minute:55},
    {hour:23,minute:55}
)}

events[3]={name: 'Chaos Castle:', startUp: new Array(
    {hour:0,minute:55},
    {hour:2,minute:55},
    {hour:4,minute:55},
    {hour:6,minute:55},
    {hour:8,minute:55},
    {hour:10,minute:55},
    {hour:12,minute:55},
    {hour:14,minute:55},
    {hour:16,minute:55},
    {hour:18,minute:55},
    {hour:20,minute:55},
    {hour:22,minute:55}
)}

events[4]={name: 'Red Dragon:', startUp: new Array(
    {hour:0,minute:0},
    {hour:2,minute:0},
    {hour:4,minute:0},
    {hour:6,minute:0},
    {hour:8,minute:0},
    {hour:10,minute:0},
    {hour:12,minute:0},
    {hour:14,minute:0},
    {hour:16,minute:0},
    {hour:18,minute:0},
    {hour:20,minute:0},
    {hour:22,minute:0}
)}

events[5]={name: 'Gold Invasion:', startUp: new Array(
    {hour:0,minute:0},
    {hour:2,minute:0},
    {hour:4,minute:0},
    {hour:6,minute:0},
    {hour:8,minute:0},
    {hour:10,minute:0},
    {hour:12,minute:0},
    {hour:14,minute:0},
    {hour:16,minute:0},
    {hour:18,minute:0},
    {hour:20,minute:0},
    {hour:22,minute:0}
)}

events[6]={name: 'White Wizard:', startUp: new Array(
    {hour:0,minute:0},
    {hour:2,minute:0},
    {hour:4,minute:0},
    {hour:6,minute:0},
    {hour:8,minute:0},
    {hour:10,minute:0},
    {hour:12,minute:0},
    {hour:14,minute:0},
    {hour:16,minute:0},
    {hour:18,minute:0},
    {hour:20,minute:0},
    {hour:22,minute:0}
)}

events[7]={name: 'Blue:', startUp: new Array(
    {hour:0,minute:40},
    {hour:1,minute:40},
    {hour:2,minute:40},
    {hour:3,minute:40},
    {hour:4,minute:40},
    {hour:5,minute:40},
    {hour:6,minute:40},
    {hour:7,minute:40},
    {hour:8,minute:40},
    {hour:9,minute:40},
    {hour:10,minute:40},
    {hour:11,minute:40},
    {hour:12,minute:40},
    {hour:13,minute:40},
    {hour:14,minute:40},
    {hour:15,minute:40},
    {hour:16,minute:40},
    {hour:17,minute:40},
    {hour:18,minute:40},
    {hour:19,minute:40},
    {hour:20,minute:40},
    {hour:21,minute:40},
    {hour:22,minute:40},
    {hour:23,minute:40},
    {hour:24,minute:40}
)}

events[7]={name: 'Hide&Seek:', startUp: new Array(
    {hour:0,minute:42},
    {hour:1,minute:22},
    {hour:2,minute:32},
    {hour:3,minute:42},
    {hour:4,minute:52},
    {hour:6,minute:02},
    {hour:7,minute:12},
    {hour:8,minute:22},
    {hour:9,minute:32},
    {hour:10,minute:42},
    {hour:11,minute:52},
    {hour:13,minute:02},
    {hour:14,minute:12},
    {hour:15,minute:22},
    {hour:16,minute:32},
    {hour:17,minute:42},
    {hour:18,minute:52},
    {hour:20,minute:02},
    {hour:21,minute:12},
    {hour:22,minute:22},
    {hour:23,minute:32}
)}

events[8]={name: 'Sky:', startUp: new Array(
    {hour:1,minute:5},
    {hour:4,minute:5},
    {hour:7,minute:5},
    {hour:10,minute:5},
    {hour:13,minute:5},
    {hour:16,minute:5},
    {hour:19,minute:5},
    {hour:23,minute:5}
)}

events[9]={name: 'Boss Attack:', startUp: new Array(
    {hour:1,minute:50},
    {hour:4,minute:50},
    {hour:7,minute:50},
    {hour:10,minute:50},
    {hour:13,minute:50},
    {hour:16,minute:50},
    {hour:23,minute:50}
)}


events[10]={name: 'Happy Hour:', startUp: new Array(
    {hour:5,minute:5},
    {hour:2,minute:5},
    {hour:8,minute:5},
    {hour:11,minute:5},
    {hour:14,minute:5},
    {hour:17,minute:5},
    {hour:20,minute:5},
    {hour:0,minute:5}
)}

events[11]={name: 'Hit and Up:', startUp: new Array(
    {hour:0,minute:20},
    {hour:2,minute:20},
    {hour:5,minute:20},
    {hour:8,minute:20},
    {hour:11,minute:20},
    {hour:14,minute:20},
    {hour:20,minute:20}
)}

events[12]={name: 'Raklion:', startUp: new Array(
    {hour:0,minute:15},
    {hour:3,minute:15},
    {hour:6,minute:15},
    {hour:9,minute:15},
    {hour:12,minute:15},
    {hour:15,minute:15},
    {hour:18,minute:15},
    {hour:21,minute:15}
)}

events[13]={name: 'Moss:', startUp: new Array(
    {hour:3,minute:35},
    {hour:7,minute:35},
    {hour:11,minute:35},
    {hour:15,minute:35},
    {hour:19,minute:35},
    {hour:23,minute:35}
)}

events[14]={name: 'Illusion Temple:', startUp: new Array(
    {hour:0,minute:25},
    {hour:1,minute:25},
    {hour:2,minute:25},
    {hour:3,minute:25},
    {hour:4,minute:25},
    {hour:5,minute:25},
    {hour:6,minute:25},
    {hour:7,minute:25},
    {hour:8,minute:25},
    {hour:9,minute:25},
    {hour:10,minute:25},
    {hour:11,minute:25},
    {hour:12,minute:25},
    {hour:13,minute:25},
    {hour:14,minute:25},
    {hour:15,minute:25},
    {hour:16,minute:25},
    {hour:17,minute:25},
    {hour:18,minute:25},
    {hour:19,minute:25},
    {hour:20,minute:25},
    {hour:21,minute:25},
    {hour:22,minute:25},
    {hour:23,minute:25},
    {hour:24,minute:25}
)}

events[15]={name: 'Castle Deep:', startUp: new Array(
    {hour:1,minute:25},
    {hour:7,minute:25},
    {hour:13,minute:25},
    {hour:19,minute:25}
)}

events[16]={name: 'CryWolf:', startUp: new Array(
    {hour:1,minute:45},
    {hour:4,minute:45},
    {hour:7,minute:45},
    {hour:10,minute:45},
    {hour:13,minute:45},
    {hour:16,minute:20},
    {hour:19,minute:45},
    {hour:22,minute:45}
)}

var curTime=1336998502;
var dateTime=1336953600;
if(localStorage.curTime) {
    curTime = Number(localStorage.curTime);
} else {
    // use default set above
}
// not sure if we need to persist dateTime but doing it anyway!
if(localStorage.dateTime) {
    dateTime = Number(localStorage.dateTime);
} else {
    // use default set above
}
function timeLeft(i){
    for(j in events[i].startUp){
        tmp=events[i].startUp[j].hour*3600+events[i].startUp[j].minute*60
        if(dateTime+tmp>curTime){
            return dateTime+tmp-curTime;
        }
    }
    tmp=events[i].startUp[0].hour*3600+events[i].startUp[0].minute*60
    return dateTime+86400+tmp-curTime;
}

function getFormatedLeftTime($seconds){
    $second = $seconds % 60;
    $minutes = parseInt(($seconds / 60) % 60);
    $hour =  parseInt(($seconds / 3600) % 24);
    $days = parseInt($seconds / (24 * 3600));

    $ret = '';
    if ($days > 0)
        if ($days == 1) $ret += '1 day ';
        else $ret += $days + ' days ';


    if ($hour > 0){
        if ($hour < 10) $hour = '0' + $hour;
        $ret += $hour + ':';
    }else if ($days > 0) $ret += '00:';

    if($minutes < 10) $minutes = '0' + $minutes;

    $ret += $minutes + ':';

    if ($second < 10) $second = '0' + $second;

    $ret += $second;
    return $ret;

}

function updateTimes(){
    curTime++;
    localStorage.curTime = curTime; // save current time
    for (i in events){
        document.getElementById("timeLeft"+i).innerHTML=getFormatedLeftTime(timeLeft(i));
    }
}

for(i in events)
    document.getElementById("eventList").innerHTML+="<div style='float:right; color: #FFFF00;' id='timeLeft"+i+"'>"+getFormatedLeftTime(timeLeft(i))+"</div><div style=\"color: #00FFFF;\"><strong>"+events[i].name+"</strong></div>";
setInterval("updateTimes()", 1000);



</script>
于 2012-05-14T14:10:19.503 に答える
0

カウンターサーバー側を保持し、ページにグラフィカルタイマーのみを配置できます

于 2012-05-14T14:12:26.393 に答える