使用JavaScript將倒數計時器存儲到cookie中，而無需在頁面刷新或關閉後重新啓動計時器

Question

我正在開發考試Web應用程序，並且正在使用JavaScript執行倒計時並將時間存儲到Cookie中，以便當頁面被刷新或故意關閉，它不會從頭開始重複倒計時。

我的觀察是，它存儲cookie並從最後的時間檢索它，然後立即再次從頭開始。

我的JavaScript代碼如下

<script> 
var loginUser = "<?php echo $uid ?>"; 
// Defining the set Cookie method 
function setCookie(cname,cvalue,exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires=" + d.toGMTString(); 
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 
// Defining get cookie function 
function getCookie(cname) { 
    var name = cname + "="; 
    var decodedCookie = decodeURIComponent(document.cookie); 
    var ca = decodedCookie.split(';'); 
    for(var i = 0; i < ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

// Return or Get the time stored in the cookie if available 
    var oldTime = parseInt(getCookie(loginUser), 10); 

// Set the date we're counting down to 
var countDownDate = new Date().getTime() + ((4/180)*60*60*1000); 

// Update the count down every 1 second 
var x = setInterval(function() { 

    // Get todays date and time 
    var now = new Date().getTime(); 
    // 
    var distance = countDownDate - now; 
    var oldTime = parseInt(getCookie(loginUser), 10); 
     setCookie(loginUser, distance, 30); 

    if(isNaN(oldTime)) 
    { 
     alert("new user NaN"); 
     // Find the distance between now an the count down date 

     // Time calculations for days, hours, minutes and seconds 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 
    } 
    else{ 


     // Time calculations for days, hours, minutes and seconds from the saved distance 
     // in the cookie 
     var days = Math.floor(oldTime/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((oldTime % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((oldTime % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((oldTime % (1000 * 60))/1000); 
    } 





    //Output the result in an element with id="timer" 
    document.getElementById("timer").value = hours + "h " + minutes + "m " + seconds + "s "; 
    //var n = oldTime.toString(); 
    //document.getElementById("timer").value = n; 


    // If the count down remains 15 minutes, write some text 

if (minutes == 1 && seconds == 1) { 
     alert("Hello! 1 minute gone"); 
    } 


    // If the count down is over, write some text 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("timer"); 
     timer.value= "EXPIRED"; 
     alert("Hello! Exam is over"); 
     location = "http://localhost:81/aquaexam/exam_complete.php?id=1"; 
    } 
}, 1000); 
</script> 

我的HTML代碼

<tr width="100%" style="text-align:right; align:right;"> <td > <input type="text" name="timer" id="timer" size="20" readonly="true" style="text-align:center;"/></td></tr> 

Answer 1

我終於解決了它。

最終JavaScript代碼。您可以複製並粘貼以供使用。

<script> 
// define variable for cookie name using the user login id 
var loginUser = "<?php echo $uid ?>"; 
// Defining the set Cookie method 
function setCookie(cname,cvalue,exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires=" + d.toGMTString(); 
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 
// Defining get cookie function 
function getCookie(cname) { 
    var name = cname + "="; 
    var decodedCookie = decodeURIComponent(document.cookie); 
    var ca = decodedCookie.split(';'); 
    for(var i = 0; i < ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

// Function that will call when document loaded. 
window.onload = function() { 
// Return or Get the time stored in the cookie if available 
    var oldTime = parseInt(getCookie(loginUser), 10); 

    if(isNaN(oldTime) == false) 
    { 
      // Reset the date or time we're counting down to by 
      //adding the Cookie time to the present for continous countdown 
      var countDownDate = new Date().getTime() + oldTime; 

     // Update the count down every 1 second  
     var x = setInterval(function() { 
     // Get todays date and time 
     var now = new Date().getTime(); 
      // Find the distance between now an the count down date 
     var distance = countDownDate - now; 
     setCookie(loginUser, distance, 30); 
     // Update the count down every 1 second 

     // Time calculations for days, hours, minutes and seconds from the saved distance 
     // in the cookie 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 


     //Output the result in an element with id="timer" 
    document.getElementById("timer").value = hours + "h " + minutes + "m " + seconds + "s "; 

      // If the count down remains 15 minutes, notification alert 
    if (minutes == 15 && seconds == 1) { 
     alert("Hello! 15 minutes to go"); 
    } 

    // If the count down remains 5 minutes, notification alert 
    if (minutes == 5 && seconds == 1) { 
     alert("Hello! 5 minutes to go"); 
    } 

// If the count down is over, notification alert and automatically submits the exam 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("timer"); 
     timer.value= "EXPIRED"; 
     alert("Hello! Exam is over"); 
     location = "http://localhost:81/aquaexam/exam_complete.php?id=1"; 
    } 

     }, 1000); 
    } 
    else{ 

    // Set the date or time we're counting down to 
    var countDownDate = new Date().getTime() + ((1)*60*60*1000); 

      // Update the count down every 1 second 
       var x = setInterval(function() { 
      // Get todays date and time 
       var now = new Date().getTime(); 
      // Find the distance between now an the count down date 
       var distance = countDownDate - now; 

       setCookie(loginUser, distance, 30); 


     // Find the distance between now an the count down date 

     // Time calculations for days, hours, minutes and seconds 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 

    //Output the result in an element with id="timer" 
    document.getElementById("timer").value = hours + "h " + minutes + "m " + seconds + "s "; 


     // If the count down remains 15 minutes, notification alert 
    if (minutes == 15 && seconds == 1) { 
     alert("Hello! 15 minutes to go"); 
    } 

    // If the count down remains 5 minutes, notification alert 
    if (minutes == 5 && seconds == 1) { 
     alert("Hello! 5 minutes to go"); 
    } 

// If the count down is over, notification alert and automatically submits the exam 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("timer"); 
     timer.value= "EXPIRED"; 
     alert("Hello! Exam is over"); 
     location = "http://localhost:81/aquaexam/exam_complete.php?id=1"; 
    } 
}, 1000); 
    } 
} 

我的HTML代碼

<tr width="100%" style="text-align:right; align:right;"> <td > <input type="text" name="timer" id="timer" size="20" readonly="true" style="text-align:center;"/></td></tr>