2012-05-14 243 views
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> 
+3

JavaScript变量/ DOM事件都不会持续存在。有一些选项,包括cookie(也许?)和本地存储。 – 2012-05-14 14:09:36

+0

@pst。注意'local-storage' - html5。 – gdoron

+0

可以使用localstorage,会话存储,一些服务器端的魔术(有或没有ajax),饼干... –

回答

2

欢迎,javascript和html是无状态的,每一页都是新的一天。

虽然您用cookie标记了您的问题,但您不要使用它,所以请使用它。
无论如何,这些东西应该在服务器端,而不是客户端。

+0

我没有使用它,因为我不知道有多明显。如果我知道我不会提出这个问题。有人可以指导我或编辑脚本来接受cookie并在页面重新加载后停止重新设置吗? – Xander

+0

@Xander。你有没有尝试自己学习呢?只是谷歌的JavaScript Cookie教程。你想让我帮你找到好的吗? – gdoron

+0

是的,我做到了。我在我的问题中已经说明了这一点。我不是那种刚刚来到这里的人,因为他们在剧本内部错过了一个“,”。我在这里拍摄,因为我遵循了一些指南,并且我无法让它们中的任何一个用于此脚本 – Xander

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> 
+0

不知道如何做到这一点,这就是为什么我在这里问 – Xander

+0

该页面是.php,因为它包含一些PHP脚本,以及我只读html的本地存储工程。我试图在脚本的末尾添加代码,但没有任何更改 – Xander

+0

我的代码是如何使用本地存储的示例。当然,它不会像现在这样工作。我想你需要保存并读取你的curTime变量而不是我的计数器变量。我会添加一个更真实的例子。 – CompanyDroneFromSector7G

0

你可以记p计数器服务器端并仅在页面中放置图形计时器