2015-07-13 1383 views
0

我是新來的HTML和JavaScript。我找不到任何解決方案來防止頁面上的計時器在頁面關閉或刷新時自動重啓。即使頁面/瀏覽器關閉或刷新,多個定時器繼續(在後臺運行)

我希望計時器能夠繼續運行,即使我關閉了頁面/瀏覽器。例如:如果定時器倒計時1小時,我激活並關閉它。 30分鐘後,我重新打開頁面,剩餘時間應該是30分鐘。

這裏我的計時器代碼:

function countdown(element, hours, minutes, seconds, oritime) { 
 
    var interval; 
 
    var htemp = 0; 
 
    var mtemp = 0; 
 
    interval = setInterval(function() { 
 
    var el = document.getElementById(element); 
 
    if (seconds == 0) { 
 
     if (minutes == 0) { 
 
     if (hours == 0) { 
 
      clearInterval(interval); 
 
      el.innerHTML = oritime; 
 
      return; 
 
     } else { 
 
      if (htemp == 0) { 
 
      minutes = 0; 
 
      seconds = 0; 
 
      htemp = 1; 
 
      } 
 
     } 
 
     } else { 
 
     if (mtemp == 0) { 
 
      seconds = 0; 
 
      mtemp = 1; 
 
     } 
 
     } 
 
    } 
 
    if (hours > 0) { 
 
     var hour_text = hours > 9 ? '' : '0'; 
 
    } else { 
 
     var hour_text = '0'; 
 
    } 
 
    if (minutes > 0) { 
 
     var minute_text = minutes > 9 ? '' : '0'; 
 
    } else { 
 
     var minute_text = '0'; 
 
    } 
 
    var second_text = seconds > 9 ? '' : '0'; 
 
    el.innerHTML = hour_text + hours + ' : ' + minute_text + minutes + ' : ' + second_text + seconds; 
 
    if (seconds == 0) { 
 
     if (minutes == 0) { 
 
     if (hours == 0) { 
 
      clearInterval(interval); 
 
      el.innerHTML = oritime; 
 
      return; 
 
     } else { 
 
      if (htemp == 1) { 
 
      hours--; 
 
      minutes = 59; 
 
      seconds = 60; 
 
      htemp = 0; 
 
      } 
 
     } 
 
     } else { 
 
     if (mtemp == 1) { 
 
      minutes--; 
 
      seconds = 60; 
 
      mtemp = 0; 
 
     } 
 
     } 
 
    } 
 
    seconds--; 
 
    }, 1000); 
 
}
<input type="button" onclick="countdown('timer1',0,5,0,'5');" value="Start Timer 1"> 
 
<div id='timer1' color='red'>5</div> 
 
<input type="button" onclick="countdown('timer2',0,5,0,'5');" value="Start Timer 2"> 
 
<div id='timer2' color='red'>5</div>

使用cookie將有可能解決這個問題?如果是這樣,怎麼樣?

我沒有使用PHP或AJAX或jQuery,因爲我還沒有知道。我沒有服務器來發布HTML文件,所以我剛剛找到了一個使用谷歌驅動器發佈的解決方案。

小題目,如果有人有上傳HTML的任何「免費」服務器以便其他人可以通過在線訪問,那就太好了。

+0

免費在沙箱中?你可以使用jsfiddle或codepen。 –

+0

「用於防止頁面上的計時器」 - 您是什麼意思? – alan0xd7

+0

我可以看到你嘗試了clearInterval,但是如果它不適合你,那是因爲變量有不同的作用域,即使它們都被稱爲「interval」。使用document.interval代替間隔並刪除它前面的「var」。document.interval不是「一件事」,但可以將任何變量附加到DOM對象。試試如果這能解決問題。 – Schien

回答

0

簡答題號碼。 Javascript只會在您的瀏覽器打開時運行,不應該用於保存任何數據。

如果你想要一個計時器,你應該使用服務器和服務器端語言如PHP來做到這一點。

編輯: 話雖如此,我發現Jqueryplugin這可能是對你有用。

+0

不是真的。您可以使用cookie存儲值,並在訪問者回來時重新計算計時器。但是這不會很安全,因爲用戶可以更改價值 –

+0

不僅用戶可以更改它們,還可以刪除它們等等......更不用說它不能用於不同的瀏覽器。 –

+0

如果使用cookie,可以向我展示關於如何存儲計時器並在重新打開頁面時更新計時器(而不是暫停)的示例?我訪問了w3schools.com,但這個例子不適合我的情況。 –

0

你應該嘗試重構你的代碼了一下,如:

if (seconds === 0 && minutes === 0 && hours === 0) { 
// your else logic here... 
} 

您也可以選擇使用switch如果你碰巧使用了大量的「嵌套IFS」和短路邏輯。當你進入JavaScript的世界時,你會發現很多有趣的庫和框架(基本上有很多聰明的聰明人已經預先寫好的很多抽象函數/方法)你)你可以用它來幫助你更快地開發功能!

由於您只將元素存儲到「變量」中,因此只要本地會話處於活動狀態(即關閉瀏覽器/會話後將清除所有存儲的變量),計時器就會一直運行。

如果你想與數據庫內的數據存儲和實際的持久性數據多玩,你應該制定至少在「本地主機」的環境,你可以輕鬆設置使用「的NodeJS」的使用在https://nodejs.org/

下載

希望這有助於您的編碼開發路線!

+0

有沒有什麼理由讓你把'if(seconds && minutes && hours === 0){'而不是'if(seconds === 0 && minutes === 0 && hours === 0){'? –

+0

嘿,謝謝你的提醒,忘記了「&&」操作符具有短路性質,編輯了我的答案〜 –