如何讓時間計數器繼續刷新或離開頁面

我在考試頁面上實現了一個計時器計數。它就像edmodo website一樣。但是當你在edmodo參加考試時，即使你刷新它，計時器仍然在計數。在我的網站上，如果刷新頁面，定時器也會刷新。我想要的就像edmodo，即使你刷新頁面仍然在計數。請參閱我的代碼以供參考。如何讓時間計數器繼續刷新或離開頁面

注：我使用Laravel5.1/jQuery的

$(document).ready(function() { 
 

 
    // Quiz timer (Start of Quiz) 
 
    var quiz_timer = $('.quiz-timer').html(); 
 
    var exact_time = parseInt($('.timer-value').html() - 1); 
 

 
    var hrs_to_spend = parseInt(exact_time/60); 
 
    var mins_to_spend = parseInt(exact_time % 60); 
 
    var secs_to_spend = 60; 
 

 
    var timeIsUp = false; 
 
    var secs = 0, 
 
    mins = 0, 
 
    hrs = 0; 
 
    var secs_zero, mins_zero, hrs_zero, h_spend_zero, m_spend_zero, s_spend_zero; 
 

 
    var setters = setInterval(function() { 
 

 
    if ($('.quiz-timer').html() != '00:00:01') { 
 
     if (secs_to_spend > 0) { 
 
     secs_to_spend--; 
 
     } 
 

 
     if (secs_to_spend <= 0) { 
 
     mins_to_spend--; 
 
     secs_to_spend = 59; 
 
     } 
 

 
     if (mins_to_spend < 0) { 
 
     hrs_to_spend--; 
 
     mins_to_spend = 59; 
 
     } 
 
    } else { 
 
     $('.quiz-timer').html('00:00:00') 
 
     clearInterval(setters); 
 
     $('.answer-quiz > .panel-info').attr('class', 'panel panel-danger'); 
 
     swal({ 
 
     title: "Oops!", 
 
     text: "Time is up.", 
 
     type: "warning" 
 
     }); 
 

 
     timeIsUp = true; 
 
     setTimeout(function() { 
 
     $('#submitAttempt').click(); 
 
     }, 2000); 
 
     return false; 
 
    } 
 

 
    h_spend_zero = (hrs_to_spend < 10) ? '0' : ''; 
 
    m_spend_zero = (mins_to_spend < 10) ? '0' : ''; 
 
    s_spend_zero = (secs_to_spend < 10) ? '0' : ''; 
 

 
    $('.quiz-timer').html(h_spend_zero + hrs_to_spend + ':' + m_spend_zero + mins_to_spend + ':' + s_spend_zero + secs_to_spend); 
 

 
    if (!timeIsUp) { 
 
     secs++; 
 
     if (secs == 60) { 
 
     mins++; 
 
     secs = 0; 
 
     } 
 

 
     if (mins == 60) { 
 
     hrs++; 
 
     mins = 0; 
 
     } 
 

 
     hrs_zero = (hrs < 10) ? '0' : ''; 
 
     mins_zero = (mins < 10) ? '0' : ''; 
 
     secs_zero = (secs < 10) ? '0' : ''; 
 

 
     $('#timeTaken').val(hrs_zero + hrs + ':' + mins_zero + mins + ':' + secs_zero + secs); 
 
    } 
 

 
    }, 1000); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Original Value: <span class="timer-value">110</span><br><br> 
 
Timer: <span class="quiz-timer"></span><br> 
 
Time Spent: <input type="text" name="time_taken" id="timeTaken" value="">

來源

2017-08-22 Jonjie

嘗試cookie或localStorage –

設置時間終止期限的日期時間。計算剩餘時間，不花時間。

例如，如果日期時間現在是「2017-08-22 08:00:01」（考試的開始時間），並且您希望1小時後到期，則將日期時間截止日期設置爲「 2017-08-22 09:00:01「（這應該從服務器返回）。然後讓javascript計數器每秒鐘重新計算現在和截止時間之間的差值與刷新率（間隔）。

來源

2017-08-22 05:44:19 evilReiko

使用本地存儲

1）在重新加載保存最後一次是在localStorage的像

window.onbeforeunload= function(){ localStorage.setItem("lastTime", timevalue); }

2）如果在localStorage的存在就像

savedTime = localStorage.getItem("lastTime"); 

mytimer.continueFrom(savedTime)

挑時間它從這一點起，並繼續計時器

這裏有大約localStorage的一看 Local Storage

來源

2017-08-22 05:44:52 Apoorv

如果其他人在我的網站上使用相同的考試登錄同一臺電腦，該怎麼辦？考試有可能繼續下去。 – Jonjie

您需要在會話開始或結束時重置計時器。一旦考試完成之前，用戶註銷，然後計時器應重置爲0：0：0 ，當新用戶來了，他登錄然後啓動計時器，然後如果他重新加載，然後再次使用本地存儲的數據。 – Apoorv

你不能做到這一點與Javascript，javascript代碼有一個會話壽命，如果你關閉它終止所使用的選項卡中的所有資源，包括JavaScript的標籤。

您可以嘗試通過在local storage中保存計數器+當前時間來解決該問題，並且每當您啓動JS代碼時，檢查本地存儲器中是否存在這些值，並使用它們初始化計數器值。

let counter = prevSavedCounter + (new Date()).getTime() - savedTime;

來源

2017-08-22 05:44:58 felixmosh

如何讓時間計數器繼續刷新或離開頁面

回答

相關問題