Таймер при обновлении страницы сбивается и отчет идет заново

@gamewizard · Регистрация: 24.07.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, помогите пожалуйста решить проблему.
У меня есть таймер, и при обновлении страницы он сбивается и отчет идет заново.

Вот код таймера:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
countdown = 2073600;
// Converting date difference from seconds to actual time
function convert_to_time(secs) {
    secs = parseInt(secs);  
    hh = secs / 3600;   
    hh = parseInt(hh);
    mmt = secs - (hh * 3600);
    mm = mmt / 60;  
    mm = parseInt(mm);  
    ss = mmt - (mm * 60);   
        
    if (hh > 23) {
       dd = hh / 24;    
       dd = parseInt(dd);   
       hh = hh - (dd * 24); 
    } else { dd = 0; }  
        
    if (ss < 10) { ss = "0"+ss; }   
    if (mm < 10) { mm = "0"+mm; }   
    if (hh < 10) { hh = "0"+hh; }   
    if (dd < 10) { dd = "0"+dd; }   
    if (dd == 0) { dd = "00"; } 
    ss = ss.toString().split('');
    mm = mm.toString().split('');
    hh = hh.toString().split(''); 
    dd = dd.toString().split('');
    return ("<div class='days'><p class='num"+dd[0]+"'></p><p class='num"+dd[1]+"'></p></div>\
        <div class='time'>\
        <p class='num"+hh[0]+"'></p><p class='num"+hh[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+mm[0]+"'></p><p class='num"+mm[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+ss[0]+"'></p><p class='num"+ss[1]+"'></p>\
        </div>");
}
 
                                            
                                            
 
// Our function that will do the actual countdown
function do_cd() {
    if (countdown < 0) {    
        document.getElementById('timer').innerHTML = "";
    } else {
        //alert(convert_to_time(countdown));
        document.getElementById('timer').innerHTML = convert_to_time(countdown);
        setTimeout('do_cd()', 1000);
    }   
    countdown = countdown - 1;  
}
 
do_cd();

@Thisman · 24.07.2014, 17:02

gamewizard, так ясень пень, он будет сбиваться, это же JS, обновляя страничку, ты весь код запускаешь заново. Как вариант сохраняй все в localstorage и доставай от туда, если данных нет, только тогда начинай с нуля
Что-нибудь на подобии:

JavaScript
1
2
3
var start = localStorage.getItem("currentTime") || 0; // будет переменная, которая отвечает за начало отсчета
var currentTime; // сюда при каждом выполнении функции таймера заноси время
localStorage["currentTime"] = currentTime // а так сохраняем текущее время

@gamewizard · 24.07.2014, 17:37 **[ТС]**

и куда я должен это вставить? помогите пожалуйста)

@Thisman · 24.07.2014, 19:38

gamewizard,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// заменяй строки на вот эти
var countdown = localStorage["currentTime"] || 2073600; 
/* ... */
 
function do_cd() {
    if (countdown < 0) {    
        document.getElementById('timer').innerHTML = "";
    } else {
        //alert(convert_to_time(countdown));
        document.getElementById('timer').innerHTML = convert_to_time(countdown);
        setTimeout('do_cd()', 1000);
    }   
    countdown = countdown - 1;
    localStroge["currentTime"] = countdown; // запоминаем время
}
 
/* ... */

@gamewizard · 24.07.2014, 19:52 **[ТС]**

Сделал так, не работает(((

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
countdown = 2073600;
// Converting date difference from seconds to actual time
function convert_to_time(secs) {
    secs = parseInt(secs);  
    hh = secs / 3600;   
    hh = parseInt(hh);
    mmt = secs - (hh * 3600);
    mm = mmt / 60;  
    mm = parseInt(mm);  
    ss = mmt - (mm * 60);   
        
    if (hh > 23) {
       dd = hh / 24;    
       dd = parseInt(dd);   
       hh = hh - (dd * 24); 
    } else { dd = 0; }  
        
    if (ss < 10) { ss = "0"+ss; }   
    if (mm < 10) { mm = "0"+mm; }   
    if (hh < 10) { hh = "0"+hh; }   
    if (dd < 10) { dd = "0"+dd; }   
    if (dd == 0) { dd = "00"; } 
    ss = ss.toString().split('');
    mm = mm.toString().split('');
    hh = hh.toString().split(''); 
    dd = dd.toString().split('');
    return ("<div class='days'><p class='num"+dd[0]+"'></p><p class='num"+dd[1]+"'></p></div>\
        <div class='time'>\
        <p class='num"+hh[0]+"'></p><p class='num"+hh[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+mm[0]+"'></p><p class='num"+mm[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+ss[0]+"'></p><p class='num"+ss[1]+"'></p>\
        </div>");
}
 
                                            
                                            
 
// заменяй строки на вот эти
var countdown = localStorage["currentTime"] || 2073600; 
/* ... */
 
do_cd();

@Thisman · 24.07.2014, 21:35

gamewizard, я же ясно написал, что заменяй СТРОКИ, а не удали функцию, и подставь мою первую строку:
это

Сообщение от gamewizard

JavaScript
1
countdown = 2073600;

замени на

Сообщение от Thisman

JavaScript
1
var countdown = localStorage["currentTime"] || 2073600;

это

Сообщение от gamewizard

JavaScript
1
2
3
4
5
6
7
8
9
10
function do_cd() {
    if (countdown < 0) {    
        document.getElementById('timer').innerHTML = "";
    } else {
        //alert(convert_to_time(countdown));
        document.getElementById('timer').innerHTML = convert_to_time(countdown);
        setTimeout('do_cd()', 1000);
    }   
    countdown = countdown - 1;
}

замени на это

Сообщение от Thisman

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function do_cd() {
    if (countdown < 0) {    
        document.getElementById('timer').innerHTML = "";
    } else {
        //alert(convert_to_time(countdown));
        document.getElementById('timer').innerHTML = convert_to_time(countdown);
        setTimeout('do_cd()', 1000);
    }   
    countdown = countdown - 1;
    localStroge["currentTime"] = countdown; // запоминаем время
}

@gamewizard · 24.07.2014, 22:36 **[ТС]**

вообщем не работает, не знаю что тут делать, помогите)

@MVS76 · 25.07.2014, 02:45

Вот посмотрите

@Thisman · 25.07.2014, 07:55

gamewizard,

JavaScript
1
2
3
4
5
6
7
    var edge = localStorage["currentTime"] || 2500;
    function tickTack () {
        edge--;
        localStorage["currentTime"] = edge;
        document.body.innerHTML = edge;
    }
    setInterval(tickTack,1000);

Вот рабочий таймер, который сохраняет время
Даже если ты закроешь вкладку, и потом снова зайдешь, время возьмется из localStorage

@gamewizard · 25.07.2014, 12:44 **[ТС]**

пожалуйста вставь в код, и кинь сюда, а то я не знаю куда это вставлять

@Thisman · 25.07.2014, 12:55

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var  countdown = localStorage["currentTime"] || 2073601;
// Converting date difference from seconds to actual time
function convert_to_time(secs) {
    secs = parseInt(secs);  
    hh = secs / 3600;   
    hh = parseInt(hh);
    mmt = secs - (hh * 3600);
    mm = mmt / 60;  
    mm = parseInt(mm);  
    ss = mmt - (mm * 60);   
        
    if (hh > 23) {
       dd = hh / 24;    
       dd = parseInt(dd);   
       hh = hh - (dd * 24); 
    } else { dd = 0; }  
        
    if (ss < 10) { ss = "0"+ss; }   
    if (mm < 10) { mm = "0"+mm; }   
    if (hh < 10) { hh = "0"+hh; }   
    if (dd < 10) { dd = "0"+dd; }   
    if (dd == 0) { dd = "00"; } 
    ss = ss.toString().split('');
    mm = mm.toString().split('');
    hh = hh.toString().split(''); 
    dd = dd.toString().split('');
    return ("<div class='days'><p class='num"+dd[0]+"'></p><p class='num"+dd[1]+"'></p></div>\
        <div class='time'>\
        <p class='num"+hh[0]+"'></p><p class='num"+hh[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+mm[0]+"'></p><p class='num"+mm[1]+"'></p>\
        <p class='numdot'></p>\
        <p class='num"+ss[0]+"'></p><p class='num"+ss[1]+"'></p>\
        </div>");
}
 
                                            
                                            
 
// Our function that will do the actual countdown
function do_cd() {
    countdown = countdown - 1;
    localStorage["currentTime"] = countdown;
    if (countdown < 0) {    
        document.getElementById('timer').innerHTML = "";
    } else {
        //alert(convert_to_time(countdown));
        document.getElementById('timer').innerHTML = convert_to_time(countdown);
        setTimeout('do_cd()', 1000);
    }   
}
 
do_cd();

@MVS76 · 25.07.2014, 13:08

Сообщение от Thisman

localStorage

Не отрабатывает в недобраузерах, а ими еще пользуются

@Thisman · 25.07.2014, 13:21

MVS76, можно использовать тогда куки, ну или же отправлять запрос ~~слишком глупо~~ на сервер

@gamewizard · 25.07.2014, 13:32 **[ТС]**

Thisman молодец, респект

@Thisman · 25.07.2014, 13:35

gamewizard, заработало?

@gamewizard · 25.07.2014, 13:40 **[ТС]**

а как теперь мне добавить например 24 дня к открытию?
ставил и так и так, время не меняется

JavaScript
1
2
var  countdown = localStorage["currentTime"] || 22073600;
var  countdown = localStorage["currentTime"] || 122073600;

@Thisman · 25.07.2014, 14:04

gamewizard, если делаешь это на своем компе, где проверял первый раз мою функцию, то тебе нужно будет сначала отчистить хранилище ( там все еще храниться данные старые ) ,а потом уже меняй макс значение и тестирую

Чиститься :

JavaScript
1
localStorage.clear()

@gamewizard · 25.07.2014, 14:08 **[ТС]**

разобрался

JavaScript
1
var  countdown = localStorage["currentTime"] || 22073600;

надо было стереть одну палочку

JavaScript
1
var  countdown = localStorage["currentTime"] | 22073600;

Спасибо тебе большое что помог Thisman, спасибку поставил)

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@gamewizard 0 / 0 / 0 Регистрация: 24.07.2014 Сообщений: 8
	24.07.2014, 17:37 [ТС]
	и куда я должен это вставить? помогите пожалуйста) 0

@gamewizard 0 / 0 / 0 Регистрация: 24.07.2014 Сообщений: 8
	24.07.2014, 22:36 [ТС]
	вообщем не работает, не знаю что тут делать, помогите) 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	25.07.2014, 02:45
	Вот посмотрите 0

@gamewizard 0 / 0 / 0 Регистрация: 24.07.2014 Сообщений: 8
	25.07.2014, 12:44 [ТС]
	пожалуйста вставь в код, и кинь сюда, а то я не знаю куда это вставлять 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	25.07.2014, 13:21
	MVS76, можно использовать тогда куки, ну или же отправлять запрос ~~слишком глупо~~ на сервер 0

@gamewizard 0 / 0 / 0 Регистрация: 24.07.2014 Сообщений: 8
	25.07.2014, 13:32 [ТС]
	Thisman молодец, респект 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	25.07.2014, 13:35
	gamewizard, заработало? 0

Таймер при обновлении страницы сбивается и отчет идет заново

Решение