26.07.2015, 18:13
|
Новичок на форуме
|
|
Регистрация: 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") >
|
|
26.07.2015, 21:04
|
без статуса
|
|
Регистрация: 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.
|
|
27.07.2015, 12:23
|
Новичок на форуме
|
|
Регистрация: 26.07.2015
Сообщений: 8
|
|
Сообщение от Deff
|
Проще поставить Время самого первого старта таймера в localStorage;
Пример входа в таймер при входе на новую страницу или первом запуске:
|
не совсем понял куда вставить этот код...и требуется чтобы таймер запускался по кнопке и срабатывал через 2 часа после нажатия кнопки
Сообщение от Deff
|
Но ежели таймер многодневный, что куки, что Storage - не Айс, нун писать на сервер время первого старта, с возвратом в скрипт-переменную на страницы
|
таймер не многодневный...в дальнейшем будет еще несколько таймеров продолжительностью 1-5 часов...но для начала пытаюсь разобраться с одним таймером...чтобы он не шел заново после обновления страницы
|
|
27.07.2015, 13:57
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
AlexSoul,
Если есть время первого старта - отнимаете из общего времени отсчета разницу между текущим и стартом
Tsumm - общее время таймирования
Tновой страницы = Tsumm - (Tтекущее - dataStart);
Tтекущее = +new Date();
dataStart = localStorage.dataStart;
Последний раз редактировалось Deff, 27.07.2015 в 14:03.
|
|
27.07.2015, 15:29
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
AlexSoul,
Ps: Наверно удобнее для обратного отсчета вставлять конечное время в Storage, расчитанное при первом запуске таймера, тогда на каждой странице отсчет от текущего времени до конечного
|
|
27.07.2015, 18:02
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
27.07.2015, 20:18
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Может завтра нарисую, чичас отвлекают
Там установка даты старта единственный раз на один запуск
Последний раз редактировалось Deff, 27.07.2015 в 20:22.
|
|
28.07.2015, 03:29
|
без статуса
|
|
Регистрация: 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.
|
|
28.07.2015, 09:48
|
Новичок на форуме
|
|
Регистрация: 26.07.2015
Сообщений: 8
|
|
Deff,
Огромное спасибо))
|
|
28.07.2015, 12:06
|
Новичок на форуме
|
|
Регистрация: 26.07.2015
Сообщений: 8
|
|
Deff,
А параллельно несколько таймеров идти не смогут? добавил еще 2 таймера....включаю второй таймер, а в это время первый останавливается.
Или это для каждого таймера отдельно функцию прописывать?
+если ставить таймерам разное время то на выходе им присваивается значение которое, как я понял, записано в localStorage
Последний раз редактировалось AlexSoul, 28.07.2015 в 12:28.
|
|
|
|