Запустить таймер при клике на кнопку

@zFARTz · Регистрация: 06.07.2015

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

Всем доброго дня нашёл таймер всё работает как нужно. Но есть проблемка. Как сделать чтобы он запускался от кнопки. Останавливался когда время закончиться и снова нажимаешь опять пошёл отсчёт. И есть ли возможность сделать чтобы кнопка была в одном месте а таймер абсолютно в другом. Но если нет так нет. Вот таймер. Всем спасибо.

HTML5
1
<span id="mT">00:00:10</span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
t = setInterval (function() {
    var s = document.getElementById ('mT'),
    f = function (x) {
        return (x / 100).toFixed (2).substr (2)
    }, 
    d = ':',
    y = s.innerHTML.split (d), 
    z = --y [2] + y [0] * 3.6e3 + y [1] * 60;
 
    if (!z) clearInterval (t); 
    s.innerHTML = [
        f (Math.floor (z / 3600)),
        f (Math.floor (z % 3600 / 60)), 
        f (z % 3600 % 60)
    ].join (d);
}, 1000);

@Thisman · 07.07.2015, 10:48

zFARTz,

HTML5
1
<button onclick = "startTimer()">Старт</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function startTimer () {
t = setInterval (function() {
    var s = document.getElementById ('mT'),
    f = function (x) {
        return (x / 100).toFixed (2).substr (2)
    }, 
    d = ':',
    y = s.innerHTML.split (d), 
    z = --y [2] + y [0] * 3.6e3 + y [1] * 60;
 
    if (!z) clearInterval (t); 
    s.innerHTML = [
        f (Math.floor (z / 3600)),
        f (Math.floor (z % 3600 / 60)), 
        f (z % 3600 % 60)
    ].join (d);
}, 1000);
}

@zFARTz · 07.07.2015, 11:11 **[ТС]**

Не запускается что не так я сделал.

HTML5
1
2
<button onclick = "startTimer()">Старт</button>
<span id="mT">00:00:10</span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function startTimer () {
t = setInterval (function() {
    var s = document.getElementById ('mT'),
    f = function (x) {
        return (x / 100).toFixed (2).substr (2)
    }, 
    d = ':',
    y = s.innerHTML.split (d), 
    z = --y [2] + y [0] * 3.6e3 + y [1] * 60;
 
    if (!z) clearInterval (t); 
    s.innerHTML = [
        f (Math.floor (z / 3600)),
        f (Math.floor (z % 3600 / 60)), 
        f (z % 3600 % 60)
    ].join (d);
}, 1000);

Добавлено через 2 минуты
Thisman, не запускается таймер помогите исправить.

@Thisman · 07.07.2015, 11:22

zFARTz, фигурную скобочку пропустили в конце
Еще раз
P.S. Код такой же, что я написал выше

@kalabuni · 07.07.2015, 11:29

zFARTz, увы, мы здесь не хирурги -- отрезать ваши кривые руки и пришить вместо них новые мы не можем

вы где-то потеряли последнюю в коде скрипта закрывающую фигурную скобку

@zFARTz · 07.07.2015, 12:17 **[ТС]**

Спасибо Вам огромное за помощь. Я облазил весь интернет не смог найти. А Вы мне помогли. Осталось сделать чтобы после обновления страницы не обновлялся счётчик а дальше работал. Спасибо ещё раз Вам за помощь.

Добавлено через 43 минуты
Всё работает когда запускаешь первый раз таймер. А когда запускаешь второй раз он некорректно работает.

@Thisman · 07.07.2015, 12:28

zFARTz, потому что код не рассчитан на это

@zFARTz · 07.07.2015, 12:32 **[ТС]**

Нельзя ничего сделать с этим кодом?

@kalabuni · 08.07.2015, 02:58

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function startTimer (tmr)
{
var B = document.getElementById ('btn'); B.disabled = 1;
var S = document.getElementById ('mT'); S.innerHTML = tmr;
 
t = setInterval (function ()
   {
   var f = function (x) {return (x / 100).toFixed (2).substr (2)}, 
    d = ':',
   h = 3.6e3,
    y = S.innerHTML.split (d), 
    z = --y [2] + y [0] * h + y [1] * 60;
 
    if (!z) clearInterval (t), B.disabled = 0; 
    S.innerHTML = [f (Math.floor (z / h)),
                   f (Math.floor (z % h / 60)), 
                   f (z % h % 60)].join (d);
   }, 1000);
}
</script>
 
<p><button id="btn" onclick="startTimer ('00:00:10')">Start</button>
<p><span id="mT">timer here</span>

@zFARTz · 08.07.2015, 10:08 **[ТС]**

Спасибо большое Вам. Это то что мне нужно.

Добавлено через 27 минут
Не получается добавить цветные рамки.
В первом случаи при старте таймера цвет красный.
Во втором цвет голубой когда ничего не происходит.

1<p><button id="btn" onclick="startTimer ('00:00:10')">Start</button>
2<p><span id="mT">timer here</span>

1<span style="background-color:red; color:white; padding:3px;">'00:00:10'</span>
2 <span style="background-color:blue; color:white; padding:3px;">timer here</span>

@script44 · 08.07.2015, 12:27

Вот такой таймер есть через кнопки старт стоп.

PHP/HTML
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
<html>
<body>
<div id="tm">00:00:11</div>
<script><!--
     var s=11
     var m=00
     var h=00
     var r=0; var tt=0;
    function T()
    {s-=1;
     if(s<0) s=59,m-=1;
     if(m<0) m=59,h-=1;   
     if(h<0) h=23     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    function Pusk()
        {if(!r){r=1;T2()}}
    function T2() 
        {if(s+m+h==0)s=11,m=00,h=00;
        tt=setInterval("T()",1000)}             
    function T3()
        {clearInterval(tt);r=0}                 
--></script>
 
<input type="button" value="старт" onclick="Pusk()">
<input type="button" value="стоп"  onclick="T3()">
</body>
</html>

@zFARTz · 08.07.2015, 12:59 **[ТС]**

Оличный таймер посмотрел мне понравился. Спасибо большое.

Добавлено через 5 минут
Есть ли возможность сделать так чтобы при нажатии открывалась какая-либо ссылка в отдельном окне? И таймер запускался одновременно с нажатием старт.

PHP/HTML
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
<html>
<body>
<div id="tm">00:00:11</div>
<script><!--
     var s=11
     var m=00
     var h=00
     var r=0; var tt=0;
    function T()
    {s-=1;
     if(s<0) s=59,m-=1;
     if(m<0) m=59,h-=1;   
     if(h<0) h=23     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    function Pusk()
        {if(!r){r=1;T2()}}
    function T2() 
        {if(s+m+h==0)s=11,m=00,h=00;
        tt=setInterval("T()",1000)}             
    function T3()
        {clearInterval(tt);r=0}                 
--></script>
 
<input type="button" value="старт" onclick="Pusk()">
<input type="button" value="стоп"  onclick="T3()">
</body>
</html>

@script44 · 08.07.2015, 15:38

Используй

PHP/HTML
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
<html>
<head>
<style>
  .st{background-color:blue; 
      color:white;}
  .sp{background-color:red; 
      color:white;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#00000">
<tr><td><div class="st" id="tm">00:00:11</div></td></tr></table> 
<script><!--
     var s=11 //секунды
     var m=00 //минуты
     var h=00 //часы
     var r=0; var tt=0;
    function T()
    {s-=1;
     if(s<0) s=59,m-=1;
     if(m<0) m=59,h-=1;   
     if(h<0) h=23     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    function Pusk()
        {if(!r){r=1;T2()}}
    function T2() 
        {if(s+m+h==0)s=11,m=00,h=00;
        tt=setInterval("T()",1000)
        tm.className="sp"} // включает красную рамку           
    function T3()
        {clearInterval(tt);r=0
        tm.className="st"} // включает синию рамку                
    function Sl()
    {window.open('https://www.cyberforum.ru','_blank','toolbar=1,location=1, status=1, menubar=1,scrollbars=1,resizable=1')}
--></script>
 
<input type="button" value="старт" onclick="Pusk(),Sl()" >  
<input type="button" value="стоп"  onclick="T3()">
</body>
</html>

Всё что находится в скобках window.open() должно быть написано в одну строку.

@zFARTz · 09.07.2015, 08:58 **[ТС]**

Да всё супер спасибо большое это то что мне нужно. Я очень Вам благодарен. Всем кто помогал мне. Это самый лучший форум.

Добавлено через 17 часов 5 минут
Ребята всем доброго утра. Нужна последняя помощь. Бился вчера но так ничего и не вышло. Таймер супер проблем нет но есть одно "НО" после перезагрузки страницы он сбрасывается. Мне нужно чтобы он продолжал работать. Я нашёл под вечер ещё один таймер в нём есть код "jquery" который не даёт сбрасываться. Помогите извлечь этот код и вставить на мой таймер.

Это который я нашёл с кодом.

PHP/HTML
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
<html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
<div id="title">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" data-load="1">Click</a>
 
<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;
 
  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;
 
  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
    $("#waiting").attr("data-load", '1');
  }
}
 
if (localStorage.getItem('eHideSec') && localStorage.getItem('eHideSec') > 0) {
  $("#waiting").attr("data-load", '0');
  eHide(15, true);
}
 
$("#waiting").on("click", function () {
  if ($(this).attr("data-load") == 1) {
    $(this).attr("data-load", '0');
    eHide(15, true);
  } else {
      alert('forbidden')
      return false;
    }
});
</script>
 
  </body>
</html>

@arni1980 · 09.07.2015, 12:46

В скрипте первого таймера есть z = --y [2] + y [0] * 3600 + y [1] * 60,
Что значит --y? Что делают эти два минуса?

@zFARTz · 09.07.2015, 13:32 **[ТС]**

Меня интересует больше предпоследний)

@arni1980 · 09.07.2015, 14:44

вопрос снят

Добавлено через 1 час 11 минут
zFARTz, а мне с предпоследней проще было разобраться)
Слегка её упростил, убрал лишнюю (на мой взгляд) функцию, переменную r и по-мелочам. Если что - спрашивай.

PHP/HTML
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
<html>
<head>
<style>
  .st{background-color:blue; 
      color:white;}
  .sp{background-color:red; 
      color:white;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#00000">
<tr><td><div class="st" id="tm">00:00:11</div></td></tr></table> 
<script>
     var s=11 //секунды
     var m=00 //минуты
     var h=00 //часы
     var tt=0;
    
    function T()
    {s-=1;
     if(s<0) s=59,m-=1;
     if(m<0) m=59,h-=1;   
     if(h<0) h=23     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    
    function Pusk() 
        {if(s+m+h==0)s=11,m=00,h=00; /*если время в переменных не задано (=0), то устанавливаем таймер на 11 сек.*/
        tt=setInterval("T()",1000) /*устанавливаем интервал автозапуска функции Т каждую секунду*/
        tm.className="sp"} // меняем в строке с id "tm" класс, который включает красную рамку           
    function T3()
        {clearInterval(tt)  /*удаляет интервал обновления */
        tm.className="st"} // меняем на класс, который включает синюю рамку                  
</script>
 
<input type="button" value="старт" onclick="Pusk()" >  
<input type="button" value="стоп"  onclick="T3()">   
</body>
</html>

@zFARTz · 09.07.2015, 19:12 **[ТС]**

Помогите разобраться с этим таймером сил больше нет одни эмоции.
1. Как сделать чтобы при обновлении страницы он не сбрасывался?
2. Почему когда я устанавливаю допустим пять таймеров на сайт то стартует только первый по нажатию на кнопку. Жму на второй всё равно запускает первый? Работает только первый остальные не запускаются по нажатию других кнопок?
Это горе какое-то а не таймер. Помогите разобраться пожалуйста!!! Мне нужен только этот что Вы помогли сделать.

CSS
1
2
3
4
  .st{background-color:blue; 
      color:white;}
  .sp{background-color:red; 
      color:white;}

HTML5
1
2
3
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#00000">
<tr><td><div class="st" id="tm">00:00:00</div></td></tr></table>
<input type="button" value="mail" onclick="Pusk(),Sl()" >

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
     var s=15 //секунды
     var m=00 //минуты
     var h=00 //часы
     var r=0; var tt=0;
    function T()
    {s-=1;
     if(s<0) s=15,m-=1;
     if(m<0) m=00,h-=1;   
     if(h<0) h=00     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    function Pusk()
        {if(!r){r=1;T2()}}
    function T2() 
        {if(s+m+h==0)s=11,m=00,h=00;
        tt=setInterval("T()",1000)
        tm.className="sp"} //            
    function T3()
        {clearInterval(tt);r=0
        tm.className="st"} //                 
    function Sl()
    {window.open('https://mail.ru/','_blank')}

@arni1980 · 09.07.2015, 20:00

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

Помогите разобраться с этим таймером сил больше нет одни эмоции.
1. Как сделать чтобы при обновлении страницы он не сбрасывался?
2. Почему когда я устанавливаю допустим пять таймеров на сайт то стартует только первый по нажатию на кнопку. Жму на второй всё равно запускает первый? Работает только первый остальные не запускаются по нажатию других кнопок?
Это горе какое-то а не таймер. Помогите разобраться пожалуйста!!! Мне нужен только этот что Вы помогли сделать.

Я как раз учусь и разбираю чужие скрипты. Со вторым пунктом хотел бы посмотреть код (в вышеизложенном только 1 таймер), может помогу. А по первому пункту не знаю, ведь обновляется страница - обновляются все переменные, может и нельзя.

@kalabuni · 09.07.2015, 21:15

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

Что значит --y? Что делают эти два минуса?

два минуса уменьшают значение y на единицу
причём сначала уменьшают значение y и затем в формуле принимает участие новое (уменьшенное) значение y

а если написать y--, то сначала в формуле (в выражении) принимает участие старое (неуменьшенное) значение y, и только после вычисления формулы значение y уменьшается

смотрим, думаем:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var y = 5;
 
var x = --y + 10; // уменьшили и потом посчитали
alert (x); // 14
alert (y); // 4
 
var z = 5;
 
var x = z-- + 10; // сначала посчитали, а затем уменьшили
alert (x); // 15
alert (z); // 4

аналогично работают ++y и y++, только они увеличивают значение на единицу

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	07.07.2015, 11:22
	zFARTz, фигурную скобочку пропустили в конце Еще раз P.S. Код такой же, что я написал выше 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.07.2015, 11:29
	zFARTz, увы, мы здесь не хирурги -- отрезать ваши кривые руки и пришить вместо них новые мы не можем вы где-то потеряли последнюю в коде скрипта закрывающую фигурную скобку 1

@zFARTz 1 / 1 / 0 Регистрация: 06.07.2015 Сообщений: 15
	07.07.2015, 12:17 [ТС]
	Спасибо Вам огромное за помощь. Я облазил весь интернет не смог найти. А Вы мне помогли. Осталось сделать чтобы после обновления страницы не обновлялся счётчик а дальше работал. Спасибо ещё раз Вам за помощь. Добавлено через 43 минуты Всё работает когда запускаешь первый раз таймер. А когда запускаешь второй раз он некорректно работает. 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	07.07.2015, 12:28
	zFARTz, потому что код не рассчитан на это 0

@zFARTz 1 / 1 / 0 Регистрация: 06.07.2015 Сообщений: 15
	07.07.2015, 12:32 [ТС]
	Нельзя ничего сделать с этим кодом? 0

@zFARTz 1 / 1 / 0 Регистрация: 06.07.2015 Сообщений: 15
	08.07.2015, 10:08 [ТС]
	Спасибо большое Вам. Это то что мне нужно. Добавлено через 27 минут Не получается добавить цветные рамки. В первом случаи при старте таймера цвет красный. Во втором цвет голубой когда ничего не происходит. 1<p><button id="btn" onclick="startTimer ('00:00:10')">Start</button> 2<p><span id="mT">timer here</span> 1<span style="background-color:red; color:white; padding:3px;">'00:00:10'</span> 2 <span style="background-color:blue; color:white; padding:3px;">timer here</span> 0

@arni1980 16 / 16 / 6 Регистрация: 02.06.2015 Сообщений: 90
	09.07.2015, 12:46
	В скрипте первого таймера есть z = --y [2] + y [0] * 3600 + y [1] * 60, Что значит --y? Что делают эти два минуса? 0

@zFARTz 1 / 1 / 0 Регистрация: 06.07.2015 Сообщений: 15
	09.07.2015, 13:32 [ТС]
	Меня интересует больше предпоследний) 0