當用戶離開頁面時重新啓動定時器

我開發了一個JSP頁面。在此頁面上，我有一個倒數計時器，顯示時間爲hh:mm:ss。從該頁面向前一頁（第2頁）提供鏈接。在第2頁上完成一些工作後，控制權將再次轉移到第1頁。當用戶離開頁面時重新啓動定時器

我有一個計時器，當頁面1加載時啓動。當我轉到第2頁並返回第1頁時，計時器被刷新。我怎樣才能讓它從離開頁面時的位置開始？

這裏是我的計時器代碼：

<script language="JavaScript"> 
function countdown(elementName, minutes, seconds) 
{ 
    var element, endTime, hours, mins, msLeft, time; 

    function twoDigits(n) { 
     return (n <= 9 ? "0" + n : n); 
    } 

    function getCurrentTime() { 
     time = new Date(); 
     hours = time.getUTCHours(); 
     mins = time.getUTCMinutes(); 
     secs = time.getUTCSeconds(); 
     alert(hours + " " + mins + " " + secs); 
    } 

    function updateTimer() { 
     msLeft = endTime - (+new Date); 

     if (msLeft < 999) { 
      alert("please save your work and send your file!"); 
     } else { 
      time = new Date(msLeft); 
      hours = time.getUTCHours(); 
      mins = time.getUTCMinutes(); 
      secs = time.getUTCSeconds(); 
      element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(secs); 
      setTimeout(updateTimer, time.getUTCMilliseconds() + 500); 
     } 
     if(hours == 0 && mins == 0 && secs == 59) alert("dsdsdsdsdsd"); 
    } 

    function setCookie(name, value, expires) { 
     document.cookie = name + "=" + escape(value) + "; path=/" + ((expires == null) ? "" : "; expires=" + expires.toGMTString()); 
    } 

    function getCookie (name) { 
     var cname = name + "=";    
     var dc = document.cookie; 

     if (dc.length > 0) {    
      begin = dc.indexOf(cname);  
      if (begin != -1) {   
       begin += cname.length;  
       end = dc.indexOf(";", begin); 
       if (end == -1) end = dc.length; 
       return unescape(dc.substring(begin, end)); 
      } 
     } 
     return null; 
    } 
    var exp = new Date();         
    exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * 30)); 
    element = document.getElementById(elementName); 
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500; 
    updateTimer(); 
} 
</script>

來源

2013-10-04 Rohhit

我認爲你可以使用cookies，您切換到第2頁之前存儲當前時間和一個標誌=真;當你回到第1頁時，你停用flag = false來繼續計算時間。

你可以做遵循以下步驟：

1）創建內容的js文件：

function setCookie(key, value, days) { 
    var expires = ""; 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     expires = "; expires=" + date.toGMTString(); 
    } 

    document.cookie = key + "=" + value + expires + "; path=/"; 
} 

function getCookie(key) { 
    var nameEQ = key + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') 
      c = c.substring(1, c.length); 
     if (c.indexOf(nameEQ) == 0) 
      return c.substring(nameEQ.length, c.length); 
    } 
    return null; 
} 

function removeCookie(key) { 
    setCookie(key, "", -1); 
}

2）在表格1日前點擊進入，形成2，您可以設置當前時間cookie。

setCookie("tracking_time", time_string, 5);

請參考Javascript Date Time functions知道如何獲取/設置時間字符串

3）回來的時候，從形式2 Form 1，你可以從cookie的獲取時間值，則設置爲定時器來繼續計數時間。

var time_string = getCookie("tracking_time");

然後，解析TIME_STRING反對

這是一個示例完整的代碼

<html> 
<head> 
</head> 
<body> 
    <span id="countdown">Start</span> 
    <script> 
     function setCookie(key, value, days) { 
     var expires = ""; 
     if (days) { 
      var date = new Date(); 
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
      expires = "; expires=" + date.toGMTString(); 
     } 

     document.cookie = key + "=" + value + expires + "; path=/"; 
     } 

     function getCookie(key) { 
     var nameEQ = key + "="; 
     var ca = document.cookie.split(';'); 
     for (var i = 0; i < ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0) == ' ') 
       c = c.substring(1, c.length); 
      if (c.indexOf(nameEQ) == 0) 
      return c.substring(nameEQ.length, c.length); 
     } 
     return null; 
    } 

    function removeCookie(key) { 
     setCookie(key, "", -1); 
    } 
    var countdown = document.getElementById("countdown"); 
    var days, hours, minutes, seconds; 
    var target_date = getCookie("tracking_time"); 

    if (target_date == null) { 
     target_date = new Date().getTime() + (2*60*60*1000); // set countdown 2 hours 
    } 

    function updateTimer() { 
     setInterval(function() { 
     // this line below will set to function that user click on link to go to form 2 
     setCookie("tracking_time", target_date, 1); 
     // End line 

     // find the amount of "seconds" between now and target 
     var current_date = new Date().getTime(); 
     var seconds_left = (target_date - current_date)/1000; 

     // do some time calculations 
     days = parseInt(seconds_left/86400); 
     seconds_left = seconds_left % 86400; 

     hours = parseInt(seconds_left/3600); 
     seconds_left = seconds_left % 3600; 

     minutes = parseInt(seconds_left/60); 
     seconds = parseInt(seconds_left % 60); 

     // format countdown string + set tag value 
     countdown.innerHTML = hours + "h: " + minutes + "m: " + seconds + "s"; 

    }, 1000); 
} 

updateTimer(); 

</script> 
</body> 
</html>

來源

2013-10-04 07:25:43

好的...謝謝你哈阮... – Rohhit

我在設置的值如你所說，但我無法將cookie值設置爲當我返回到第1頁的計時器。你會發布任何示例代碼或鏈接，可以幫助我...... ?? – Rohhit

我剛剛發佈了代碼，請嘗試一下並編寫您的評論/問題，如果代碼仍不能解決您的問題。 –

當用戶離開頁面時重新啓動定時器

回答

相關問題