Таймер

@Айдар94 · Регистрация: 05.11.2013

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

Можете помочь найти ошибку? Реально не знаю уже где ошибка. Ошибка возникла, когда я с #Countbox на .Countbox селектор поменял...

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
 
dedlineHours = getCookie("dedlineHours");
dedlineMinutes = getCookie("dedlineMinutes");
dedlineSeconds = getCookie("dedlineSeconds");
 
hourX = 38; minuteX = 21; secX= 41;
 
if (!dedlineHours) {
    dateStart = new Date();
 
    dedlineHours = dateStart.getHours() + hourX;
    dedlineMinutes = dateStart.getMinutes() + minuteX;
    dedlineSeconds = dateStart.getSeconds() + secX + 1;
    document.cookie = "dedlineHours="+dedlineHours;
    document.cookie = "dedlineMinutes="+dedlineMinutes;
    document.cookie = "dedlineSeconds="+dedlineSeconds;
 
    delete dateStart;
}       
 
function CountBox() {
    dateNow = new Date();
    amount = ((dedlineHours - dateNow.getHours())*60*60 + (dedlineMinutes - dateNow.getMinutes())*60 + (dedlineSeconds - dateNow.getSeconds()))*1000;
    delete dateNow;
    if (amount < 0) {
        out = "<div class='countbox-num'><div class='countbox-days1'><span></span>0</div><div class='countbox-days2'><span></span>0</div><div class='countbox-days-text'></div></div>" + 
            "<div class='countbox-space'></div>" +
            "<div class='countbox-num'><div class='countbox-hours1'><span></span>0</div><div class='countbox-hours2'><span></span>0</div><div class='countbox-hours-text'></div></div>" + 
            "<div class='countbox-space'></div>" +
            "<div class='countbox-num'><div class='countbox-mins1'><span></span>0</div><div class='countbox-mins2'><span></span>0</div><div class='countbox-mins-text'></div></div>";
        document.getElementsByClassName("countbox").innerHTML = out;
        setTimeout("CountBox()", 10000)
    } else {
        days = 0;
        days1 = 0;
        days2 = 0;
        hours = 0;
        hours1 = 0;
        hours2 = 0;
        mins = 0;
        mins1 = 0;
        mins2 = 0;
        secs = 0;
        secs1 = 0;
        secs2 = 0;
        out = "";
        amount = Math.floor(amount / 1e3);
        days = Math.floor(amount / 86400);
        days1 = (days >= 10) ? days.toString().charAt(0) : '0';
        days2 = (days >= 10) ? days.toString().charAt(1) : days.toString().charAt(0);
        amount = amount % 86400;
        hours = Math.floor(amount / 3600);
        hours1 = (hours >= 10) ? hours.toString().charAt(0) : '0';
        hours2 = (hours >= 10) ? hours.toString().charAt(1) : hours.toString().charAt(0);
        amount = amount % 3600;
        mins = Math.floor(amount / 60);
        mins1 = (mins >= 10) ? mins.toString().charAt(0) : '0';
        mins2 = (mins >= 10) ? mins.toString().charAt(1) : mins.toString().charAt(0);
        out = "<div class='countbox-num'><div class='countbox-days1'><span></span>" + days1 + "</div><div class='countbox-days2'><span></span>" + days2 + "</div><div class='countbox-days-text'></div></div>" + 
            "<span class='countbox-space'>дня(ей)</span>" +
            "<div class='countbox-num'><div class='countbox-hours1'><span></span>" + hours1 + "</div><div class='countbox-hours2'><span></span>" + hours2 + "</div><div class='countbox-hours-text'></div></div>" + 
            "<span class='countbox-space'>часа(ов)</span>" +
            "<div class='countbox-num'><div class='countbox-mins1'><span></span>" + mins1 + "</div><div class='countbox-mins2'><span></span>" + mins2 + "</div><div class='countbox-mins-text'></div></div>" + 
            "<span class='countbox-space'>минут(ы)</span>";
        document.getElementsByClassName("countbox").innerHTML = out;
        setTimeout("CountBox()", 1e3)
    }
}
 
window.onload = function () {
    CountBox()
}

@Вадим Мошев · 21.01.2015, 22:10

До того, как поменяли селектор, всё работало корректно?
В чём выражается ошибка?

Добавлено через 2 минуты
А ещё скажите, какую задачу вы решаете

Добавлено через 20 минут

JavaScript
1
2
3
document.cookie = "dedlineHours="+dedlineHours;
    document.cookie = "dedlineMinutes="+dedlineMinutes;
    document.cookie = "dedlineSeconds="+dedlineSeconds;

строка cookie должна иметь вид "param1=val1; param2=val2, ..."
то есть, этот код следует переписать в виде:

JavaScript
1
2
3
document.cookie = "dedlineHours="+dedlineHours + '; ' ;
    document.cookie += "dedlineMinutes="+dedlineMinutes + '; ';
    document.cookie += "dedlineSeconds="+dedlineSeconds;

@Айдар94 · 21.01.2015, 23:32 **[ТС]**

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

HTML5
1
2
<div class="countbox">
                    </div>

@Вадим Мошев · 21.01.2015, 23:51

так.

JavaScript
1
document.getElementsByClassName("countbox").innerHTML = out;

функция getElementsByClassName возвращает не один элемент, а массив элементов.
Я бы посоветовал сделать так:

JavaScript
1
2
3
var elementsArr = document.getElementsByClassName("countbox");
var myCountBox = elementsArr[0];
myCountBox.innerHTML = out;

Добавлено через 5 минут
Хотя, если не будет работать, попробуйте отменить все изменения, что я насоветовал в своём предыдущем сообщении

@Айдар94 · 22.01.2015, 00:50 **[ТС]**

Вадим Мошев, Спасибо! Сейчас попробуем) Отпишусь

Добавлено через 52 минуты
Вадим Мошев, таймер заработал, только есть один нюанс. Таймер надо запустить дважды. А тут выходит, что таймер в одном месте работает, а в другом нет. Пришел к выводу что это зависит от

JavaScript
1
var myCountBox = elementsArr[0];

, так как при

JavaScript
1
var myCountBox = elementsArr[1];

выходит, что таймер уже там где не работал начинает работать, а в другом блоке перестает(

Добавлено через 2 минуты

После обновления вместо цифер таймера вышли 0N 0N 0N. С чем это связано?)

@Вадим Мошев · 22.01.2015, 00:51

Хм, ну я код-то ваш смотрел можно сказать, по диагонали.
Раз так, по попробуйте выполнить эти действия как для elementsArr[0], так и для elementsArr[1]

Добавлено через 53 секунды

Сообщение от Айдар94

После обновления вместо цифер таймера вышли 0N 0N 0N. С чем это связано?)

пока не знаю. попробуйте мой совет выше

@Айдар94 · 22.01.2015, 01:09 **[ТС]**

http://codepen.io/anon/pen/ramRrX

Добавлено через 2 минуты
Вот к чему пришел:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
 
dedlineHours = getCookie("dedlineHours");
dedlineMinutes = getCookie("dedlineMinutes");
dedlineSeconds = getCookie("dedlineSeconds");
 
hourX = 38; minuteX = 21; secX= 41;
 
if (!dedlineHours) {
    dateStart = new Date();
 
    dedlineHours = dateStart.getHours() + hourX;
    dedlineMinutes = dateStart.getMinutes() + minuteX;
    dedlineSeconds = dateStart.getSeconds() + secX + 1;
    document.cookie = "dedlineHours="+dedlineHours;
    document.cookie = "dedlineMinutes="+dedlineMinutes;
    document.cookie = "dedlineSeconds="+dedlineSeconds;
 
    delete dateStart;
}       
 
function CountBox() {
    dateNow = new Date();
    amount = ((dedlineHours - dateNow.getHours())*60*60 + (dedlineMinutes - dateNow.getMinutes())*60 + (dedlineSeconds - dateNow.getSeconds()))*1000;
    delete dateNow;
    if (amount < 0) {
        out = "<div class='countbox-num'><div class='countbox-days1'><span></span>0</div><div class='countbox-days2'><span></span>0</div><div class='countbox-days-text'></div></div>" + 
            "<div class='countbox-space'></div>" +
            "<div class='countbox-num'><div class='countbox-hours1'><span></span>0</div><div class='countbox-hours2'><span></span>0</div><div class='countbox-hours-text'></div></div>" + 
            "<div class='countbox-space'></div>" +
            "<div class='countbox-num'><div class='countbox-mins1'><span></span>0</div><div class='countbox-mins2'><span></span>0</div><div class='countbox-mins-text'></div></div>";
        var elementsArr = document.getElementsByClassName("countbox");
var myCountBox = elementsArr[1];
var myCountBox1 = elementsArr[0];
myCountBox.innerHTML = out;
      myCountBox1.innerHTML = out;
        setTimeout("CountBox()", 10000)
    } else {
        days = 0;
        days1 = 0;
        days2 = 0;
        hours = 0;
        hours1 = 0;
        hours2 = 0;
        mins = 0;
        mins1 = 0;
        mins2 = 0;
        secs = 0;
        secs1 = 0;
        secs2 = 0;
        out = "";
        amount = Math.floor(amount / 1e3);
        days = Math.floor(amount / 86400);
        days1 = (days >= 10) ? days.toString().charAt(0) : '0';
        days2 = (days >= 10) ? days.toString().charAt(1) : days.toString().charAt(0);
        amount = amount % 86400;
        hours = Math.floor(amount / 3600);
        hours1 = (hours >= 10) ? hours.toString().charAt(0) : '0';
        hours2 = (hours >= 10) ? hours.toString().charAt(1) : hours.toString().charAt(0);
        amount = amount % 3600;
        mins = Math.floor(amount / 60);
        mins1 = (mins >= 10) ? mins.toString().charAt(0) : '0';
        mins2 = (mins >= 10) ? mins.toString().charAt(1) : mins.toString().charAt(0);
        out = "<div class='countbox-num'><div class='countbox-days1'><span></span>" + days1 + "</div><div class='countbox-days2'><span></span>" + days2 + "</div><div class='countbox-days-text'></div></div>" + 
            "<span class='countbox-space'>дня(ей)</span>" +
            "<div class='countbox-num'><div class='countbox-hours1'><span></span>" + hours1 + "</div><div class='countbox-hours2'><span></span>" + hours2 + "</div><div class='countbox-hours-text'></div></div>" + 
            "<span class='countbox-space'>часа(ов)</span>" +
            "<div class='countbox-num'><div class='countbox-mins1'><span></span>" + mins1 + "</div><div class='countbox-mins2'><span></span>" + mins2 + "</div><div class='countbox-mins-text'></div></div>" + 
            "<span class='countbox-space'>минут(ы)</span>";
        var elementsArr = document.getElementsByClassName("countbox");
var myCountBox = elementsArr[1];
var myCountBox1 = elementsArr[0];
myCountBox.innerHTML = out;
      myCountBox1.innerHTML = out;
        setTimeout("CountBox()", 1e3)
    }
}
 
window.onload = function () {
    CountBox()
}

Добавлено через 2 минуты
Вадим Мошев, все работает, спасибо) Вот только один момент меня волнует, как поставить хранение куков на точно то время, которое осталось на таймере? Получается если человек браузер закроет и снова войдет таймер снова обнудлтсяя до 2 дней(

@Вадим Мошев · 22.01.2015, 12:06

Для этого вам необходимо использовать параметр expires. Вот, например, кусок кода, который устанавливает время жизни кукам, равное 3-м минутам.

JavaScript
1
2
3
4
5
6
// задать время жизни кукам равное 3 минутам (180 сек)  
                   var date = new Date(new Date().getTime() + 180*1000);
                   var expiresString = date.toUTCString();
                   
                   document.cookie = "prevBgColor=" + document.getElementById('colorsList').value + 
                                    "; expires=" + expiresString;

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .