Создать таймер с обратным отсчетом

@m1n1gamer · Регистрация: 15.07.2015

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

Нашел скрипт текущего времени с использованием графики, и вот не знаю как под таймер сделать. более подробные характеристики таймера найдете ниже

HTML5
1
2
3
4
5
6
7
8
9
<table cellpadding="5"><td bgcolor="black">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2"></td></table>

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
<script type="text/javascript">
dg0=new Image();dg0.src="dg0.gif";
dg1=new Image();dg1.src="dg1.gif";
dg2=new Image();dg2.src="dg2.gif";
dg3=new Image();dg3.src="dg3.gif";
dg4=new Image();dg4.src="dg4.gif";
dg5=new Image();dg5.src="dg5.gif";
dg6=new Image();dg6.src="dg6.gif";
dg7=new Image();dg7.src="dg7.gif";
dg8=new Image();dg8.src="dg8.gif";
dg9=new Image();dg9.src="dg9.gif";
function dotime(){
theTime=setTimeout('dotime()',1000);
d = new Date();
hr= d.getHours()+100;
mn= d.getMinutes()+100;
se= d.getSeconds()+100;
tot=''+hr+mn+se;
document.hr1.src='dg'+tot.substring(1,2)+'.gif';
document.hr2.src='dg'+tot.substring(2,3)+'.gif';
document.mn1.src='dg'+tot.substring(4,5)+'.gif';
document.mn2.src='dg'+tot.substring(5,6)+'.gif';
document.se1.src='dg'+tot.substring(7,8)+'.gif';
document.se2.src='dg'+tot.substring(8,9)+'.gif';
}
dotime();
</script>

Нужен таймер , с указанием до какой даты и времени надо идти, чтобы высвечивалось сколько осталось до указанного момента с использованием графики :
dg0 - 9.gif - цифры
dgc.gif - двоеточие
dgp.gif - точка

графика :
графика для таймера

@arni1980 · 20.07.2015, 12:25

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

с указанием до какой даты и времени надо идти

где и как такое должно указываться?
"до какой даты",- то есть страница будет открыта все эти дни?
Отсчет с нуля?

@m1n1gamer · 20.07.2015, 16:24 **[ТС]**

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

@kalabuni · 20.07.2015, 16:53

вопросы:

1) таймер должен показывать "сколько прошло" с момента запуска или "сколько осталось" до окончания его работы?

2) когда установленное время "выйдет", что должен будет отображать таймер?

@m1n1gamer · 20.07.2015, 17:39 **[ТС]**

1 - сколько осталось до конца.
2- перейти на другую страницу например konec.html

@kalabuni · 20.07.2015, 18:43

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

2- перейти на другую страницу например konec.html

хотели сказать "переадресовывается"?

ибо гость может зайти на страницу через 5 секунд после окончания работы таймера и желаемого вами момента "перехода" на другую страницу не увидит

@arni1980 · 20.07.2015, 22:21

HTML5
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
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>Таймер</title>
 
</head>
<body>
    
<table cellpadding="5"><td bgcolor="black">
<img src="dg8.gif" name="hr1">
<img src="dg8.gif" name="hr2">
<img src="dgc.gif">
<img src="dg8.gif" name="mn1">
<img src="dg8.gif" name="mn2">
<img src="dgc.gif">
<img src="dg8.gif" name="se1">
<img src="dg8.gif" name="se2">
</td></table>
  <button onclick="reset()" >сброс</button>  
    
    <script type="text/javascript">
 
var hr,mn,se;
if (localStorage.getItem('se') && (localStorage.getItem('hr')+localStorage.getItem('mn')+localStorage.getItem('se')) >0) {
hr = localStorage.getItem('hr');
mn = localStorage.getItem('mn');
se = localStorage.getItem('se'); 
}
    
    else {
var time = prompt("Введите время для таймера", "00:03:06");
hr = time.substring(0,2);       
mn= time.substring(3,5);  
se= time.substring(6,8); 
    };
 
dg0=new Image();dg0.src="dg0.gif";  
dg1=new Image();dg1.src="dg1.gif";
dg2=new Image();dg2.src="dg2.gif";
dg3=new Image();dg3.src="dg3.gif";
dg4=new Image();dg4.src="dg4.gif";
dg5=new Image();dg5.src="dg5.gif";
dg6=new Image();dg6.src="dg6.gif";
dg7=new Image();dg7.src="dg7.gif";
dg8=new Image();dg8.src="dg8.gif";
dg9=new Image();dg9.src="dg9.gif";
        
function dotime(){
 
    localStorage.setItem('se', se);
    localStorage.setItem('mn', mn);
    localStorage.setItem('hr', hr);
    
   se = se.toString();
   mn = mn.toString();
   hr = hr.toString();
 
if (hr.length<2) hr = "0"+hr;    
if (mn.length<2) mn = "0"+mn;  
if (se.length<2) se = "0"+se;  
    
tot= ''+hr+mn+se;
   
document.hr1.src='dg'+tot.substring(0,1)+'.gif';
document.hr2.src='dg'+tot.substring(1,2)+'.gif';
document.mn1.src='dg'+tot.substring(2,3)+'.gif';
document.mn2.src='dg'+tot.substring(3,4)+'.gif';
document.se1.src='dg'+tot.substring(4,5)+'.gif';
document.se2.src='dg'+tot.substring(5,6)+'.gif';
    
     if (tot <= 0) {
    clearTimeout(theTime);
    localStorage.removeItem('se');    
    localStorage.removeItem('mn');
    localStorage.removeItem('hr');      
        
         window.open('https://mail.ru/','_blank');
        alert("Время истекло");       
    }  
    
    se = se -1; 
    if (se < 0) {se = 59, mn = mn-1};
    if (mn < 0) {mn = 59, hr = hr-1};
  
if (tot>0) {    
 theTime=setTimeout('dotime()',1000);   
}
}
dotime();
        
    function reset(){
    se = 0;
    mn = 0;
    hr = 0;  
    dotime();  
    }
</script>
</body>
</html>

Добавлено через 11 минут
m1n1gamer, Работает, при перезагрузке не сбивается. Только можно (если не для себя) еще поставить проверку на неправильный ввод параметров (часов не более 24-х, минут и секунд не более 59) и др.

@m1n1gamer · 21.07.2015, 09:51 **[ТС]**

а можно сделать чтобы до указанного времени таймер ишел? а не время которое указал?

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

@arni1980 · 21.07.2015, 10:12

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

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

как будет вводиться время до которого должен идти таймер? так же как сейчас выставляется время, через prompt?

@m1n1gamer · 21.07.2015, 10:41 **[ТС]**

есть несколько вариантов :
1) если возможно из файла time.txt чтобы по 100 раз не редактировать код сайта
или
2) внутри в документе задавать как переменную (просто time="время")

Добавлено через 20 минут
и возможно ли чтобы по окончанию на таймер высвечивалось вместо цифер тире? (dgl1.gif) а ":" оставалось неизменным?

@arni1980 · 21.07.2015, 14:27

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

возможно ли чтобы по окончанию на таймер высвечивалось вместо цифер тире? (dgl1.gif) а ":" оставалось неизменным?

нужна такая картинка с черточкой, по ссылке ее не было.

@m1n1gamer · 21.07.2015, 15:20 **[ТС]**

вот держите

@arni1980 · 21.07.2015, 15:39

Что-то получилось, тестируйте.

HTML5
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
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>Таймер</title>
 
</head>
<body>
    
<table cellpadding="5"><td bgcolor="black">
<img src="dg8.gif" name="hr1">
<img src="dg8.gif" name="hr2">
<img src="dgc.gif">
<img src="dg8.gif" name="mn1">
<img src="dg8.gif" name="mn2">
<img src="dgc.gif">
<img src="dg8.gif" name="se1">
<img src="dg8.gif" name="se2">
</td></table>
  <button onclick="reset()" >сброс</button>  
    
    <script>
        
var tm = "15:38:30";  //Время срабатывания таймера
        
hr1 = tm.substring(0,2);               
mn1= tm.substring(3,5);  
se1= tm.substring(6,8); 
 
        
var hr,mn,se;
if (localStorage.getItem('se') && (localStorage.getItem('hr')+localStorage.getItem('mn')+localStorage.getItem('se')) >0) {
hr = localStorage.getItem('hr');
mn = localStorage.getItem('mn');
se = localStorage.getItem('se'); 
}
    
    else {
d = new Date();
hr2= d.getHours();
mn2= d.getMinutes();
se2= d.getSeconds();
if (hr2.length<2) hr2 = "0"+hr2;    
if (mn2.length<2) mn2 = "0"+mn2;  
if (se2.length<2) se2 = "0"+se2;     
        
        
if (hr1<=hr2) hr = 24 - parseInt(hr2)+parseInt(hr1); 
if (hr1>hr2) hr = parseInt(hr1)-parseInt(hr2); 
if (hr1==hr2 && mn1>mn2) hr = "00";
if (hr1==hr2 && mn1<mn2) hr = "23";
if (hr1==hr2 && mn1==mn2 && se1>se2) hr = "00";
if (hr1==hr2 && mn1==mn2 && se1<se2) hr = "23";
        
if (mn1<mn2 && se1>se2) mn = 60 - parseInt(mn2)+parseInt(mn1);
if (mn1<mn2 && se1<se2) mn = 59 - parseInt(mn2)+parseInt(mn1);        
if (mn1>mn2 && se1>se2) mn = parseInt(mn1)-parseInt(mn2);
if (mn1>mn2 && se1<se2) mn = "00";
if (mn1==mn2 && se1>se2) mn = "00";
if (mn1==mn2 && se1<se2) mn = "59";
                
if (se1<se2) se = 60 - parseInt(se2)+parseInt(se1);
if (se1>se2) se = parseInt(se1)-parseInt(se2);   
if (se1==se2) se = "00";         
    };
      
dg0=new Image();dg0.src="dg0.gif";  
dg1=new Image();dg1.src="dg1.gif";
dg2=new Image();dg2.src="dg2.gif";
dg3=new Image();dg3.src="dg3.gif";
dg4=new Image();dg4.src="dg4.gif";
dg5=new Image();dg5.src="dg5.gif";
dg6=new Image();dg6.src="dg6.gif";
dg7=new Image();dg7.src="dg7.gif";
dg8=new Image();dg8.src="dg8.gif";
dg9=new Image();dg9.src="dg9.gif";
        
function dotime(){
 
    localStorage.setItem('se', se);
    localStorage.setItem('mn', mn);
    localStorage.setItem('hr', hr);
    
   se = se.toString();
   mn = mn.toString();
   hr = hr.toString();
 
if (hr.length<2) hr = "0"+hr;    
if (mn.length<2) mn = "0"+mn;  
if (se.length<2) se = "0"+se;  
    
tot= ''+hr+mn+se;
    
document.hr1.src='dg'+tot.substring(0,1)+'.gif';
document.hr2.src='dg'+tot.substring(1,2)+'.gif';
document.mn1.src='dg'+tot.substring(2,3)+'.gif';
document.mn2.src='dg'+tot.substring(3,4)+'.gif';
document.se1.src='dg'+tot.substring(4,5)+'.gif';
document.se2.src='dg'+tot.substring(5,6)+'.gif';
    
     if (tot <= 0) {
document.hr1.src='dgl1.gif';
document.hr2.src='dgl1.gif';
document.mn1.src='dgl1.gif';
document.mn2.src='dgl1.gif';
document.se1.src='dgl1.gif';
document.se2.src='dgl1.gif';
         
    clearTimeout(theTime);
    localStorage.removeItem('se');    
    localStorage.removeItem('mn');
    localStorage.removeItem('hr');      
         
     window.open('https://mail.ru/','_blank');      
    }  
    
    se = se -1; 
    if (se < 0) {se = 59, mn = mn-1};
    if (mn < 0) {mn = 59, hr = hr-1};
  
if (tot>0) {    
 theTime=setTimeout('dotime()',1000);   
}
}
dotime();
        
    function reset(){
    se = 0;
    mn = 0;
    hr = 0;  
    dotime();  
    }
</script>
</body>
</html>

@m1n1gamer · 21.07.2015, 16:07 **[ТС]**

последний вопрос, можно сделать еще с указанием даты? чтобы было дата и время до которого таймер идет
например так.

1 - картинка пробел (dgx.gif)
2 - картинка-days
3 - картинка-пример

Табличка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table cellpadding="5"><td bgcolor="black">
<img src="dg0.gif" name="d1">
<img src="dg1.gif" name="d2">
<img src="dgx.gif">
<img src="days.gif">
<img src="dgx.gif">
<img src="dg8.gif" name="hr1">
<img src="dg8.gif" name="hr2">
<img src="dgc.gif">
<img src="dg8.gif" name="mn1">
<img src="dg8.gif" name="mn2">
<img src="dgc.gif">
<img src="dg8.gif" name="se1">
<img src="dg8.gif" name="se2">
</td></table>

@arni1980 · 21.07.2015, 16:28

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

последний вопрос, можно сделать еще с указанием даты? чтобы было дата и время до которого таймер идет
например так.
1 - картинка пробел (dgx.gif)
2 - картинка-days
3 - картинка-пример

Дата - то есть например завтра 22-е число, надо чтоб вывело цифру "22", если таймер поставлен на завтра? А после цифры через пробел надпись DAYS?
Время - то, которое забивается в переменную tm просто вывести на экран дополнительно к времени таймера после надписи DAYS?
Сам таймер тогда должен быть выше или ниже всего этого?

@m1n1gamer · 21.07.2015, 18:06 **[ТС]**

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

Дата - то есть например завтра 22-е число, надо чтоб вывело цифру "22", если таймер поставлен на завтра?

Нет, нужно вывести сколько осталось дней до 22 числа например: 01. Если меньше 1 дня то вместо 2 цифер , надо вывести 00 . После окончания таймера вместо цифер даты поставить черточки

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

А после цифры через пробел надпись DAYS?
Время - то, которое забивается в переменную tm просто вывести на экран дополнительно к времени таймера после надписи DAYS?

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

Сам таймер тогда должен быть выше или ниже всего этого?

Все как на примере можно сделать?

Добавлено через 11 минут
нужно вывести только сколько осталось до определенного момента
n-дней n-часов,минут,секунд
Выводить время указанного момента не надо

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта 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-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

Создать таймер с обратным отсчетом

Решение

Решение

@m1n1gamer 0 / 0 / 1 Регистрация: 15.07.2015 Сообщений: 53
	20.07.2015, 16:24 [ТС]
	нужно чтобы таймер можно было поставить максимум на 24 часа, и независимо от моего захода на страницу. ( А то бывает такое что каждый раз сначала идет при каждом заходе) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.07.2015, 16:53
	вопросы: 1) таймер должен показывать "сколько прошло" с момента запуска или "сколько осталось" до окончания его работы? 2) когда установленное время "выйдет", что должен будет отображать таймер? 0

@m1n1gamer 0 / 0 / 1 Регистрация: 15.07.2015 Сообщений: 53
	20.07.2015, 17:39 [ТС]
	1 - сколько осталось до конца. 2- перейти на другую страницу например konec.html 0

@m1n1gamer 0 / 0 / 1 Регистрация: 15.07.2015 Сообщений: 53
	21.07.2015, 09:51 [ТС]
	а можно сделать чтобы до указанного времени таймер ишел? а не время которое указал? просто мне этот таймер нужно залить на сайт, чтобы там он работал до указанного времени (например событие стрим будет в 15:00) и нужно чтобы время отчитывалось до этого момента, а потом переходило на другую страницу 0

@m1n1gamer 0 / 0 / 1 Регистрация: 15.07.2015 Сообщений: 53
	21.07.2015, 10:41 [ТС]
	есть несколько вариантов : 1) если возможно из файла time.txt чтобы по 100 раз не редактировать код сайта или 2) внутри в документе задавать как переменную (просто time="время") Добавлено через 20 минут и возможно ли чтобы по окончанию на таймер высвечивалось вместо цифер тире? (dgl1.gif) а ":" оставалось неизменным? Изображения 0

@m1n1gamer 0 / 0 / 1 Регистрация: 15.07.2015 Сообщений: 53
	21.07.2015, 15:20 [ТС]
	вот держите Изображения 0