Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.07.2015, 18:13
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Таймер и куки
Здравствуйте... Требуется сделать таймер обратного отсчета на форуме. Сам отсчет таймера производится отлично...но при обновлении сбрасывается и считает заново...вычитал что решается проблема путём использования куков...но не могу никак разобраться с ними...совсем новичек в этом деле поэтому прошу строго не судить...весь гугл облазил но так и не понял как реализовать
вот что получилось на данном этапе:
<script type="text/javascript">
function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );
 
  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
        cookie_string += "; path=" + escape ( path );
 
  if ( domain )
        cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
        cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

function startTimer() {
var my_timer = document.getElementById("my_timer");
var time = my_timer.innerHTML;
var arr = time.split(":");
var h = arr[0];
var m = arr[1];
var s = arr[2];
if (s == 0) {
if (m == 0) {
if (h == 0) {
alert("Время вышло");
window.location.reload();
return;
}
h--;
m = 60;
if (h < 10) h = "0" + h;
}
m--;
if (m < 10) m = "0" + m;
s = 59;
}
else s--;
if (s < 10) s = "0" + s;
document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
setTimeout(startTimer, 1000);
}

if(getCookie('countdown')){
    countdown4 = getCookie('countdown');
};


</script>
 
<span id="my_timer" style="color: #f00; font-size: 100%; font-weight: bold;">02:00:00</span>
<input type="button" value="Запустить таймер" onClick=startTimer("my_timer") >
Ответить с цитированием
  #2 (permalink)  
Старый 26.07.2015, 21:04
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

AlexSoul,
Проще поставить Время самого первого старта таймера в localStorage;
Пример входа в таймер при входе на новую страницу или первом запуске:
var  dataStart = localStorage.dataStart;
if(!dataStart)localStorage.dataStart = '' +new Date();
dataStart = +localStorage.dataStart;

Но ежели таймер многодневный, что куки, что Storage - не Айс, нун писать на сервер время первого старта, с возвратом в скрипт-переменную на страницы

Последний раз редактировалось Deff, 27.07.2015 в 02:00.
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2015, 12:23
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Сообщение от Deff
Проще поставить Время самого первого старта таймера в localStorage;
Пример входа в таймер при входе на новую страницу или первом запуске:
не совсем понял куда вставить этот код...и требуется чтобы таймер запускался по кнопке и срабатывал через 2 часа после нажатия кнопки

Сообщение от Deff
Но ежели таймер многодневный, что куки, что Storage - не Айс, нун писать на сервер время первого старта, с возвратом в скрипт-переменную на страницы
таймер не многодневный...в дальнейшем будет еще несколько таймеров продолжительностью 1-5 часов...но для начала пытаюсь разобраться с одним таймером...чтобы он не шел заново после обновления страницы
Ответить с цитированием
  #4 (permalink)  
Старый 27.07.2015, 13:57
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

AlexSoul,
Если есть время первого старта - отнимаете из общего времени отсчета разницу между текущим и стартом
Tsumm - общее время таймирования
Tновой страницы = Tsumm - (Tтекущее - dataStart);
Tтекущее = +new Date();
dataStart = localStorage.dataStart;

Последний раз редактировалось Deff, 27.07.2015 в 14:03.
Ответить с цитированием
  #5 (permalink)  
Старый 27.07.2015, 15:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

AlexSoul,
Ps: Наверно удобнее для обратного отсчета вставлять конечное время в Storage, расчитанное при первом запуске таймера, тогда на каждой странице отсчет от текущего времени до конечного
Ответить с цитированием
  #6 (permalink)  
Старый 27.07.2015, 18:02
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Deff,
function startTimer(T) {

var  dataStart = localStorage.dataStart;
if(!dataStart)
{
localStorage.dataStart = '' +new Date();
dataStart = +localStorage.dataStart;
}
if(dataStart)
{
T1 = new Date();
Tsumm = T1.setMilliseconds(T1.getMilliseconds() + T);
Tn = Tsumm - (T1 - dataStart);
T1 = +new Date();
dataStart = localStorage.dataStart;
//alert(T1);
//alert(TSumm);
//alert(T);
}

setTimeout(startTimer(Tn), 1000);
}

есть ли в моих действиях хоть что то правильное? а то что то вообще понять не могу (((
Tsumm в аллерт вообще не выводится почему то

Последний раз редактировалось AlexSoul, 27.07.2015 в 18:04.
Ответить с цитированием
  #7 (permalink)  
Старый 27.07.2015, 20:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Может завтра нарисую, чичас отвлекают
Там установка даты старта единственный раз на один запуск

Последний раз редактировалось Deff, 27.07.2015 в 20:22.
Ответить с цитированием
  #8 (permalink)  
Старый 28.07.2015, 03:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<span id="my_timer" style="color: #f00; font-size: 100%; font-weight: bold;">02:00:00</span>
<input type="button" value="Запустить таймер" onClick=startTimer("my_timer",1) >
<input type="button" value="Stop" onClick=startTimer("my_timer",2) >
<input type="button" value="Reset" onClick=startTimer("my_timer",3) >

<script type="text/javascript">
(function() {

function getElem_Time(outElem) {
     var arr = outElem.innerHTML.split(':')
     return 1000*(3600*(+arr[0])+60*(+arr[1])+(+arr[2]));
}

function two_dig (t) {
     return  (parseInt(t)/100).toFixed(2).toString().split('.')[1];
}

function getHH_MM_SS(sek) {
     return two_dig (sek/3600)+  ':' + two_dig ((sek/60)%60)+ ':' + two_dig (sek%60);
}

var timerId;		// ID setInterval
var firstSaveVal;	// Тут сохраняем начальное значение Time из элемента;
var  endDate	 = 	localStorage.endDate;


startTimer = function(sel,test){	//test == 1 при запуске по кнопке и == 0 при автозапуске на новой странице, 3 - сброс;

  var outElem = document.getElementById(sel); //объект вывода/ввода цифр 
  clearInterval(timerId);

  if(!firstSaveVal)firstSaveVal = outElem.innerHTML;

  if(test == 2) {delete localStorage.endDate; return}

  if(test == 3) {outElem.innerHTML = firstSaveVal; delete localStorage.endDate; return}

  if(!endDate &&!test) return false; //Aвтозапуск на новой странице;

  var deltaT = getElem_Time(outElem);

  if(test){
     outElem.innerHTML = firstSaveVal;
     deltaT = getElem_Time(outElem);
     delete localStorage.endDate;
     endDate = localStorage.endDate;
  }

  var thisTime = +new Date();

  if(!endDate){
    var timeEnd = thisTime + deltaT;
    localStorage.endDate = sel+','+ timeEnd;
  }

  if(endDate &&!test){
     var arr = endDate.split(',');
     var outElem = document.getElementById(arr[0]);
     var timeEnd = +arr[1];
  }


  function setOutTime(){
    if(+new Date()>=timeEnd){
       clearInterval(timerId);
       outElem.innerHTML='00:00:00';
       delete localStorage.endDate;
       return;
    }
    var timeToFinish = parseInt((timeEnd - +new Date())/1000);
    outElem.innerHTML = getHH_MM_SS(timeToFinish);
 }  setOutTime();
  

  timerId = setInterval(setOutTime,1000);


}

  startTimer("my_timer",0); //Aвтозапуск на новой странице с проверкой сохранненого в Storage(если нет - return);
  window.onfocus =   function (){startTimer("my_timer",0); } //При возврате на вкладку, бывшую неактивной
  
}());
</script>


Для перезапуска (якобы на новой странице) после запуска по кнопке "Запустить таймер", перезапустить по "Посмотреть" , не нажимая кнопки "Запустить таймер" (или иных)

Последний раз редактировалось Deff, 28.07.2015 в 08:01.
Ответить с цитированием
  #9 (permalink)  
Старый 28.07.2015, 09:48
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Deff,
Огромное спасибо))
Ответить с цитированием
  #10 (permalink)  
Старый 28.07.2015, 12:06
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Deff,
А параллельно несколько таймеров идти не смогут? добавил еще 2 таймера....включаю второй таймер, а в это время первый останавливается.
Или это для каждого таймера отдельно функцию прописывать?
+если ставить таймерам разное время то на выходе им присваивается значение которое, как я понял, записано в localStorage

Последний раз редактировалось AlexSoul, 28.07.2015 в 12:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер в куки vas88811 Events/DOM/Window 1 05.05.2015 10:14
#help Таймер обратного отсчета и куки poroxprod Общие вопросы Javascript 0 11.04.2014 14:46
Обновляемый таймер на javascript smillyhamster Общие вопросы Javascript 1 31.12.2013 10:30
Помогите с кодом сохранения параметром CheckBox-ов в куки Konstantine jQuery 0 26.05.2012 16:20
Одно событие во всех окнах одного домена kdn1990 Events/DOM/Window 18 25.04.2012 20:11