Перезапуск таймера с того места, где он был, когда пользователь покинул страницу

0

Я разработал 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>
Теги:
jsp
timer

1 ответ

1

Я думаю, вы можете использовать файлы cookie для хранения текущего времени, а один флаг = true, прежде чем перейти на страницу 2; когда вы вернетесь на страницу 1, вы де-active 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, чтобы узнать, как получить/установить временную строку

3), когда вы вернетесь в форму 1 из формы 2, вы можете получить значение времени из файла 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>
Поделиться
  • 0
    Хорошо ... спасибо, Ха Нгуен ...
  • 0
    Я установил значения в cookie, как вы сказали, но я не могу установить значения cookie для таймера, когда я вернусь на страницу 1. Будете ли вы публиковать любой пример кода или ссылку, которая может мне помочь .... ??
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню