Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.62/21: Рейтинг темы: голосов - 21, средняя оценка - 4.62
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223

Автообновление таймера

14.05.2014, 20:15. Показов 4334. Ответов 7
Метки нет (Все метки)

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

Есть скрипт (таймера обратного отсчета)
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
$(document).ready(function () {
//код jQuery
 
//функция вызова таймера
function get_timer() {
    
    //Дата для обратного отсчета
    var date_new = "May 14,2014 23:00";
    ////////////////////////////////////
    ////////////////////////////////////
    
    //Объект даты для обратного отсчета
    var date_t = new Date(date_new);
    //Объект текущей даты
    var date = new Date();
    //Вычесляем сколько миллисекунд пройдет 
    //от текущей даты до даты отсчета времени
    var timer = date_t - date;
    
    //Проверяем не нужно ли закончить отсчет
    //если дата отсчета еще не истекла, то количество
    //миллисекунд в переменной date_t будет больше чем в переменной date
    if(date_t > date) {
        
        //Вычисляем сколько осталось дней до даты отсчета.
        //Для этого количество миллисекунд до даты остчета делим
        //на количество миллисекунд в одном дне
        var day = parseInt(timer/(60*60*1000*24));
        //если полученное число меньше 10 прибавляем 0
        if(day < 10) {
            day = '0' + day;
        }
        //Приводим результат к строке
        day = day.toString();
            
        //Вычисляем сколько осталось часов до даты отсчета.
        //Для этого переменную timer делим на количество
        //миллисекунд в одном часе и отбрасываем дни
        var hour = parseInt(timer/(60*60*1000));
        //если полученное число меньше 10 прибавляем 0
        if(hour < 10) {
            hour = '0' + hour;
        }
        //Приводим результат к строке
        hour = hour.toString();
            
        //Вычисляем сколько осталось минут до даты отсчета.
        //Для этого переменную timer делим на количество
        //миллисекунд в одной минуте и отбрасываем часы
        var min = parseInt(timer/(1000*60))%60;
        //если полученное число меньше 10 прибавляем 0
        if(min < 10) {
            min = '0' + min;
        }
        //Приводим результат к строке
        min = min.toString();
            
        //Вычисляем сколько осталось секунд до даты отсчета.
        //Для этого переменную timer делим на количество
        //миллисекунд в одной минуте и отбрасываем минуты
        var sec = parseInt(timer/1000)%60;
        //если полученное число меньше 10 прибавляем 0
        if(sec < 10) {
            sec = '0' + sec;
        }
        //Приводим результат к строке
        sec = sec.toString();
        
        //Выводим дни
        //Проверяем какие предыдущие цифры времени должны вывестись на экран
        //Для десятков дней
        if(day[1] == 9 && 
            hour[0] == 2 && 
            hour[1] == 3 && 
            min[0] == 5 && 
            min[1] == 9 && 
            sec[0] == 5 && 
            sec[1] == 9) {
            animation($("#day0"),day[0]);
        }
        else {
            $("#day0").html(day[0]);
        }
        //Для единиц дней
        if(hour[0] == 2 && 
            hour[1] == 3 && 
            min[0] == 5 && 
            min[1] == 9 && 
            sec[0] == 5 && 
            sec[1] == 9) {
            animation($("#day1"),day[1]);
        }
        else {
            $("#day1").html(day[1]);
        }
        //Выводим часы
        //Проверяем какие предыдущие цифры времени должны вывестись на экран
        //Для десятков часов
        if(hour[1] == 3 && 
            min[0] == 5 && 
            min[1] == 9 && 
            sec[0] == 5 && 
            sec[1] == 9) {
            animation($("#hour0"),hour[0]);
        }
        else {
            $("#hour0").html(hour[0]);
        }
        //Для единиц чассов  
        if(min[0] == 5 && 
            min[1] == 9 && 
            sec[0] == 5 && 
            sec[1] == 9) {
            animation($("#hour1"),hour[1]);
        }
        else {
            $("#hour1").html(hour[1]);
        }
            
        //Выводим минуты
        //Проверяем какие предыдущие цифры времени должны вывестись на экран
        //Для десятков минут
        if(min[1] == 9 && 
            sec[0] == 5 && 
            sec[1] == 9) {
            animation($("#min0"),min[0]);
        }
        else {
            $("#min0").html(min[0]);
        }
        //Для единиц минут
        if(sec[0] == 5 && sec[1] == 9) {
            animation($("#min1"),min[1]);
        }
        else {
            $("#min1").html(min[1]);
        }
            
        //Выводим секунды
        //Проверяем какие предыдущие цифры времени должны вывестись на экран
        //Для десятков секунд
        if(sec[1] == 9) {
            animation($("#sec0"),sec[0]);
        }
        else {
            $("#sec0").html(sec[0]);
        }
        animation($("#sec1"),sec[1]);   
        //Переодически вызываем созданную функцию, 
        //интервал вызова одна секунда(1000 милли секунд)
        setTimeout(get_timer,1000);
    }
    else {
        $("#clock").html("<span id='stop'>Отсчет закончен!!!</span>");
    }
    
}
//Функция для красивого отображения времени.
function animation(vibor,param) {
    vibor.html(param)
        .css({'marginTop':'-20px','opacity':'0'})
        .animate({'marginTop':'0px','opacity':'1'});
}
//Вызываем функцию на исполнение
get_timer();
});
В этой части указывается дата, до которой работает таймер
JavaScript
1
2
//Дата для обратного отсчета
    var date_new = "May 14,2014 23:00";
Как сделать чтобы эта дата каждые следующие сутки обновлялась на +1?
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
14.05.2014, 20:15
Ответы с готовыми решениями:

Автообновление
Доброго времени суток. Имеется страница layout.blade.php В нем есть &lt;title&gt;Сайт&lt;title&gt; И нужно сделать автообновление titl'a ...

Автообновление геоданных
Привет. Есть сайт, который выводит данные геолокации в виде координат. Как сделать так, чтобы эти данные автоматически обновлялись и...

Автообновление страницы
Подскажите пожалуйста как заставит обновлять страницу при смене точки остановки. Например страница сделана на основе двух точек 960 и...

7
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.05.2014, 21:38
правильно ли я понял, что вам нужен таймер, который всегда будет показывать время, оставшееся до ближайших 23-х часов?

т.е. сегодня ровно в 23:00 таймер должен показать 24:00:00 и до завтрашнего вечера уменьшаться до 00:00:01, а ровно в 23:00 завтрашнего дня таймер снова должен показать 24:00:00 и опять уменьшаться до 00:00:01 ?
0
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
14.05.2014, 21:44  [ТС]
kalabuni, да, именно так
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.05.2014, 23:34
HTML5
1
2
3
4
5
6
7
8
9
10
11
<span id="mT"></span>
 
<script>
var Z, X = new Date, Y = new Date (X.getFullYear (), X.getMonth (), X.getDate (), 23);
if (X > Y) Y = new Date (Y.getTime () + 8.64e7); Z = Math.floor ((Y - X) / 1000);
delete X; delete Y; setInterval (function () {var s = document.getElementById ('mT'),
f = function (x) {return (x / 100).toFixed (2).substr (2)}; if (s.innerHTML)
var y = s.innerHTML.split (':'), z = y [0] * 3600 + y [1] * 60 + (y [2] - 1); else
{var z = Z - 1; delete Z}; if (z < 1) z = 86400; s.innerHTML = [f (Math.floor (z / 60 / 60)),
f (Math.floor (z % 3600 / 60)), f (z % 3600 % 60)].join (':')}, 1000);
</script>
0
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
14.05.2014, 23:36  [ТС]
kalabuni, это куда? вместо var date_new = "May 14,2014 23:00"; ?
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.05.2014, 23:41
Лучший ответ Сообщение было отмечено likeapimp как решение

Решение

что "куда"?
запустите мой код в любом браузере AS IS ("как он есть", т.е. без каких либо изменений) и посмотрите на результат

если он вас устроит - вставьте в нужное место своей страницы
а ваш скрипт вообще выбросите
1
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
14.05.2014, 23:57  [ТС]
kalabuni, да, спасибо, устроит
0
0 / 0 / 0
Регистрация: 09.09.2016
Сообщений: 7
09.09.2016, 16:18
kalabuni, можете подсказать пожалуйста, как модифицировать ваш скрипт, чтобы отображались только часы и время было ограниченно промежутком между 20 и 3?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.09.2016, 16:18
Помогаю со студенческими работами здесь

Автообновление чата
у меня есть запописный мини-чат на рнр...меня интересуит как сделать автообновления с подгрузкой новых сообщений без всяких мерцаний...и...

автообновление страницы
интересует скрипт для браузера, чтоб определенная страничка автоматически обновлялась примерно через каждые 15-20 скеунд. чтоб не...

Автообновление комментариев на сайте
&lt;div class=&quot;comm&quot;&gt; &lt;p class=&quot;c1&quot;&gt;fgfgfgfgfg&lt;/p&gt; &lt;p &gt;AAAAAAADsda asdas&lt;/p&gt; &lt;p&gt;asdSDs asd asdas &lt;/p&gt; &lt;p&gt;a sdasd asdas&lt;/p&gt; &lt;p&gt;sad...

Автообновление в Опере Мобайл
Видел подобные темы, но решил создать свою. Есть ли уже такой скрипт для автообновления страницы в браузере Опера Мобайл или кто-нибудь...

Автообновление страницы браузера
Всем привет! Не знаю, куда нужно было писать, в какую тему. Не нашёл. Подскажите, пожалуйста, каким образом можно сделать так, чтобы при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
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
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru