Question

我开发了一个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>

Answer 1

我认为您可以使用cookie来存储当前时间，并在切换到第2页之前使用一个flag = true;当你回到第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）在点击进入表单2之前的表单1中，您可以将当前时间设置为cookie。

setCookie("tracking_time", time_string, 5);

请参阅Javascript Date Time functions以了解如何获取/设置时间字符串

3）当从表单2返回表单1时，您可以从cookie获取时间值，然后设置为计时器以继续计时。

var time_string = getCookie("tracking_time");

然后将time_string解析为object

这是一个示例完整代码

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

从用户离开页面时的位置重新启动计时器

1 个答案: