Форум

DerGogunio · #1 (**permalink**) 04.06.2014, 22:25

Доброго времени суток.

Скажу сразу в JS я не силен, поэтому появилась необходимость вашей помощи.
Для знатоков, я думаю, задача не представит сложностей.
За чистоту кода сильно не ругайте, попытался написать как смог.

Есть countdown-таймер JS на 15 сек., который запускается по клику (переход по внешней ссылке).
Все работает, но вот только при обновлении страницы таймер сбрасывается на исходное значение.

В связи с этим вопрос:
Каким образом заставить счетчик продолжать свою работу заданное время при обновлении страницы?

Читал учебник по кукам (http://learn.javascript.ru/cookie), но так и не понял, как привязать их к данному таймеру.

Код JS:

function eHide(sec){
    var time    = sec;
	var hour    = parseInt(time / 3600);
    if ( hour < 1 ) hour = 0;
    time = parseInt(time - hour * 3600);
    if ( hour < 10 ) hour = '0'+hour; 
    var minutes = parseInt(time / 60);
    if ( minutes < 1 ) minutes = 0;
    time = parseInt(time - minutes * 60);
    if ( minutes < 10 ) minutes = '0'+minutes; 
    var seconds = time;
    if ( seconds < 10 ) seconds = '0'+seconds;
	
	document.getElementById("title").innerHTML = 'Wait ' +hour+':'+minutes+':'+seconds;
	sec--;
	    if(sec>0)  {
        window.setTimeout(function(){ eHide(sec);}, 1000);
		enabled = false;
		
    }  else { 
        document.getElementById("title").innerHTML = 'The End!';
    }
}

Код HTML:

<div id="title">Start</div>
<a  id="waiting" href="http://ya.ru/" target="_blank" onclick="eHide (15); ">Click</a>

jsnb · #2 (**permalink**) 05.06.2014, 08:46

Для такого лучше не куки, а localstorage юзать:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
<div id="title">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" onclick="eHide(15, true);">Click</a>

<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;

  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;

  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
  }
}
</script>

  </body>
</html>

DerGogunio · #3 (**permalink**) 05.06.2014, 11:09

Спасибо за отклик.

Исчезла проблема повторного запуска таймера при многочисленных кликах по ссылке. Благодарю за подсказку.

Но проблема сброса таймера при полном обновлении страницы (F5) осталась.
Попробовал добавить запрет повторного перехода по ссылке, но, если обновить страницу, таймер становится в исходное положение.
Каким образом заставить таймер считать указанное время даже если страница полностью обновлена?

Вот код с запретом на повторный переход по ссылке:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
<div id="title">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" onclick="eHide(15, true);" load="1">Click</a>

<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;

  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;

  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
  }
}
  $("#waiting").on("click", function() {
    if($(this).attr("load") == 1) {        
       $(this).attr("load", "0");
    }
    else {
        return false;
    }
});
</script>

  </body>
</html>

jsnb · #4 (**permalink**) 05.06.2014, 13:11

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
<div id="title">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" data-load="1">Click</a>

<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;

  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;

  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
	$("#waiting").attr("data-load", '1');
  }
}

if (localStorage.getItem('eHideSec') && localStorage.getItem('eHideSec') > 0) {
  $("#waiting").attr("data-load", '0');
  eHide(15, true);
}

$("#waiting").on("click", function () {
  if ($(this).attr("data-load") == 1) {
    $(this).attr("data-load", '0');
    eHide(15, true);
  } else {
      alert('forbidden')
      return false;
    }
});
</script>

  </body>
</html>

DerGogunio · #5 (**permalink**) 05.06.2014, 13:35

Вот это да...
jsnb, снимаю шляпу перед Вашим профессионализмом.

Написанный Вами итоговый код выполняет все свои функции.
Огромное Вам спасибо.

Форум

Справочник

Discord чат

Курсы javascript