За последние 24 часа нас посетили 17713 программистов и 1625 роботов. Сейчас ищут 1016 программистов ...

Как сделать чтобы секундомер стартовал не с нуля

Тема в разделе "JavaScript и AJAX", создана пользователем sound, 2 апр 2015.

  1. sound

    sound Guest

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

    То есть допустим я передаю в функцию startTIME() время в формате 2015-04-01 21:52:16, и секундомер начиная свою работу пишет что уже прошло несколько часов.
    то есть сначала отнимает от текущего времени заданную дату 2015-04-01 21:52:16, потом пишет разницу и после чего начинает отсчет.


    Код (PHP):
    1. <script language="JavaScript" type="text/javascript">
    2. //объявляем переменные
    3. var base = 60; 
    4. var clocktimer,dateObj,dh,dm,ds,ms; 
    5. var readout=''; 
    6. var h=1, m=1, tm=1,s=0,ts=0,ms=0,show=true, init=0, ii=0; 
    7. //функция для очистки поля
    8. function clearСlock() { 
    9.     clearTimeout(clocktimer); 
    10.     h=1;m=1;tm=1;s=0;ts=0;ms=0; 
    11.     init=0;show=true; 
    12.     readout='00:00:00.00'; 
    13.     document.TestForm.stopwatch.value=readout; 
    14.     ii = 0; 
    15. } 
    16. //функция для старта секундомера
    17. function startTIME() { 
    18.     var cdateObj = new Date(); 
    19.     var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000); 
    20.     if (t>999) { s++; } 
    21.     if (s>=(m*base)) { 
    22.         ts=0; 
    23.         m++; 
    24.     } else { 
    25.         ts=parseInt((ms/100)+s); 
    26.         if(ts>=base) { ts=ts-((m-1)*base); } 
    27.     } 
    28.     if (m>(h*base)) { 
    29.         tm=1; 
    30.         h++; 
    31.     } else { 
    32.         tm=parseInt((ms/100)+m); 
    33.         if(tm>=base) { tm=tm-((h-1)*base); } 
    34.     } 
    35.     ms = Math.round(t/10); 
    36.     if (ms>99) {ms=0;} 
    37.     if (ms==0) {ms='00';} 
    38.     if (ms>0&&ms<=9) { ms = '0'+ms; } 
    39.     if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; } 
    40.     dm=tm-1; 
    41.     if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; } 
    42.     dh=h-1; 
    43.     if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; } 
    44.     readout = dh + ':' + dm + ':' + ds + '.' + ms; 
    45.     if (show==true) { document.TestForm.stopwatch.value = readout; } 
    46.     clocktimer = setTimeout("startTIME()",1); 
    47. } 
    48. //функция для паузы
    49. function pause() { 
    50.     if (init==0) { dateObj = new Date(); 
    51.     startTIME(); 
    52.     init=1; 
    53.     } else { if(show==true) { 
    54.     show=false; 
    55.     } else { show=true; } } 
    56. } 
    57. </script> 
    58.  
    59. <form name=TestForm>   
    60.     <input type=button value="Обнулить" onclick="clearСlock()">  
    61.     <input name=stopwatch size=10 value="00:00:00.00">  
    62.     <input type=button value="Запуск/Остановить" onclick="pause()"> 
    63. </form>
     
    #1 sound, 2 апр 2015
  2. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Весь этот кодище - это секундомер?

    Вот, накидал тебе простенький секундомер, выводящий циферку в body. Отталкивайся от него:

    Код (PHP):
    1. function Stopwatch(){
    2.     var stopwatch_value = 0;
    3.     var interval;
    4.     this.start = function(start_from){
    5.         stopwatch_value = start_from||0;
    6.         interval = setInterval(function(){
    7.             stopwatch_value++; 
    8.             document.body.innerText = stopwatch_value;
    9.         }, 1000);
    10.     };
    11.     
    12.     this.stop = function(){
    13.         clearInterval(interval);
    14.     };
    15. }
    16.  
    17. var stopwatch = new Stopwatch();
    18. stopwatch.start(); //Запускаем таймер. Тикать будет по секундам. Если передать в этот метод число, то отсчет будет идти от него.
    19. stopwatch.stop(); //Стопаем таймер.
     
    #2 Fell-x27, 2 апр 2015
  3. sound

    sound Guest

    не увидел никаких циферок в body что не так делаю?
    поместил код над тегом body

    и значение stopwatch_value только один раз появляется по идее где то должен быть цикл, а его нет?


    Код (Text):
    1. <html><script>
    2. function Stopwatch(){
    3.    var stopwatch_value = 0;
    4.     var interval;
    5.     this.start = function(start_from){
    6.         stopwatch_value = start_from||0;
    7.         interval = setInterval(function(){
    8.             stopwatch_value++;
    9.             document.body.innerText = stopwatch_value;
    10.         }, 1000);
    11.     };
    12.    
    13.     this.stop = function(){
    14.         clearInterval(interval);
    15.     };
    16.  
    17.  
    18. alert(stopwatch_value);
    19. }
    20.  
    21. var stopwatch = new Stopwatch();
    22.  
    23.  
    24. stopwatch.start(); //Запускаем таймер. Тикать будет по секундам. Если передать в этот метод число, то отсчет будет идти от него.
    25. stopwatch.stop(); //Стопаем таймер.
    26. </script>
    27. <body></body></html>
     
    #3 sound, 2 апр 2015
  4. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Тебя тут ничего не смутило?

    Например то, что в одной строчке мы таймер запускаем, а в другой сразу стопаем, как бы между прочим?
    Убери stopwatch.stop() - таймер будет тикать.

    Добавлено спустя 47 секунд:
    Не должно быть никакого цикла нигде.

    Добавлено спустя 1 минуту 42 секунды:
    Вот.

    Добавлено спустя 5 минут 7 секунд:
    А это используйте для адаптирования под свои нужды: http://javascript.ru/Date
    Методы почитайте внимательно.

    Ручной разбор даты и ручная сборка обратно, которая у вас в коде - это ад адский. Для получения числа из даты и даты из числа в JS предусмотрены готовые решения.
     
    #4 Fell-x27, 2 апр 2015
  5. sound

    sound Guest

    ну так не тикает ничего у меня

    вот так запускаю

    Код (Text):
    1. function Stopwatch(){
    2.     var stopwatch_value = 0;
    3.     var interval;
    4.     this.start = function(start_from){
    5.         stopwatch_value = start_from||0;
    6.         interval = setInterval(function(){
    7.             stopwatch_value++;
    8.             document.body.innerText = stopwatch_value;
    9.         }, 1000);
    10.     };
    11.    
    12.     this.stop = function(){
    13.         clearInterval(interval);
    14.     };
    15.    
    16.     alert(stopwatch_value);
    17. }
    18.  
    19. var stopwatch = new Stopwatch();
    20. stopwatch.start(); //Запускаем таймер. Тикать будет по секундам. Если передать в этот метод число, то отсчет будет идти от него.
    21. //stopwatch.stop(); //Стопаем таймер.
    22. </script>
    23. <body></body></html>
    один раз всплывающее окно с 0 появляеться и дальше ничего не тикает
     
    #5 sound, 2 апр 2015
  6. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ты вставляешь скрипт до body и хочешь, чтобы он обрабатывал body... Ты JS совсем не знаешь, верно? :)
    Хочешь, чтобы работало с body, но было загружено до него, вешай вызов на onload-событие.

    Я оставлял ссылку, но ты не заметил, видимо. ВОТ СЮДА КЛИКНИ СПРАВА ВНИЗУ СМОТРИ РАБОТАЕТ КАК ЧАСЫ.
     
    #6 Fell-x27, 2 апр 2015
  7. sound

    sound Guest

    Fell-x27
    Уже хотел писать что опять ничего не работает, пробовал как только можно!!
    но запустил все в IE и там действительно счетчик тикает!!!

    Но почему в firefox ничего не работает?
    это как бы мой основной браузер для него все пишу
     
    #7 sound, 3 апр 2015
  8. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    в body помести скрипт, блин :)
     
    #8 Fell-x27, 3 апр 2015
  9. sound

    sound Guest

    Поместил ничего не появляется и не тикает в firefox
    Код (Text):
    1. <html>
    2. <body>      
    3. <script>
    4. function Stopwatch(){
    5.     var stopwatch_value = 0;
    6.     var interval;
    7.     this.start = function(start_from){
    8.         stopwatch_value = start_from||0;
    9.         interval = setInterval(function(){
    10.             stopwatch_value++;
    11.             document.body.innerText = stopwatch_value;
    12.         }, 1000);
    13.     };
    14.    
    15.     this.stop = function(){
    16.         clearInterval(interval);
    17.     };
    18.    
    19.     //alert(stopwatch_value);
    20. }
    21.  
    22. var stopwatch = new Stopwatch();
    23. stopwatch.start(); //Запускаем таймер. Тикать будет по секундам. Если передать в этот метод число, то отсчет будет идти от него.
    24. //stopwatch.stop(); //Стопаем таймер.
    25. </script>
    26. </body>
    27. </html>
     
    #9 sound, 3 апр 2015
  10. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Значит за body ставь. Или прикрути к onload.
    Код (Text):
    1.  
    2. <html>
    3. <body>
    4.  
    5. </body>
    6. <script>
    7.  
    8.  
    9. function Stopwatch(){
    10.     var stopwatch_value = 0;
    11.     var interval;
    12.     this.start = function(start_from){
    13.         stopwatch_value = start_from||0;
    14.         interval = setInterval(function(){
    15.             stopwatch_value++;
    16.             document.body.innerText = stopwatch_value;
    17.         }, 1000);
    18.     };
    19.    
    20.     this.stop = function(){
    21.         clearInterval(interval);
    22.     };
    23. }
    24.  
    25. var stopwatch = new Stopwatch();
    26. stopwatch.start(); //Запускаем таймер. Тикать будет по секундам. Если передать в этот метод число, то отсчет будет идти от него.
    27. //stopwatch.stop(); //Стопаем таймер.
    28.  
    29. </script>
    30.  
    31. </html>
    Добавлено спустя 1 минуту 34 секунды:
    Или прикрути к onload.
    Код (Text):
    1.  
    2. <html>
    3. <body onload="var stopwatch = new Stopwatch(); stopwatch.start();">
    4.  
    5. <script>
    6. function Stopwatch(){
    7.     var stopwatch_value = 0;
    8.     var interval;
    9.     this.start = function(start_from){
    10.         stopwatch_value = start_from||0;
    11.         interval = setInterval(function(){
    12.             stopwatch_value++;
    13.             document.body.innerText = stopwatch_value;
    14.         }, 1000);
    15.     };
    16.    
    17.     this.stop = function(){
    18.         clearInterval(interval);
    19.     };
    20. }
    21.  
    22. </script>
    23.  
    24. </body>
    25. </html>
    Добавлено спустя 49 секунд:
    Чувак, если у тебя такая проблема с такой фигней, как запуск скрипта, ты уверен, что сможешь его:
    1) Разобрать.
    2) Адаптировать.
    ?

    В ОП-посте не твой код, верно?
     
    #10 Fell-x27, 3 апр 2015
  11. sound

    sound Guest

    В Firefox 36.0.4
    Не работают ОБА варианта, я уже мозг сломал, всегда нормально было с явоскрипт в фаерфоксе!!
    в чем вообще проблема ?
     
    #11 sound, 3 апр 2015
  12. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    В файрфоксе и его отношении к document.body.innerText)

    Добавлено спустя 1 минуту 9 секунд:
    Код (PHP):
    1. <html>
    2. <body onload="(function(){var stopwatch = new Stopwatch(); stopwatch.start();})();">
    3.  
    4. <script>
    5. function Stopwatch(){
    6.     var stopwatch_value = 0;
    7.     var interval;
    8.     this.start = function(start_from){
    9.         stopwatch_value = start_from||0;
    10.         interval = setInterval(function(){
    11.             stopwatch_value++; 
    12.             document.body.textContent = stopwatch_value;
    13.         }, 1000);
    14.     };
    15.     
    16.     this.stop = function(){
    17.         clearInterval(interval);
    18.     };
    19. }
    20.  
    21. </script>
    22.  
    23. </body>
    24. </html>
    Добавлено спустя 3 минуты 29 секунд:
    Давай на чистоту, ты и не пытался решить проблему. Обновление странички и ожидание чуда - не считается.
     
    #12 Fell-x27, 3 апр 2015
  13. sound

    sound Guest

    Fell-x27
    Вот теперь код работает ВЕЗДЕ большое спасибо!

    Он конечно более короткий и простой понятно куда передавать начальное значение, но как сделать так чтобы время делилось на минуты и часы?
    опять возвращаться к моему громоздкому примеру ?
     
    #13 sound, 3 апр 2015
  14. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Там, на глазок, строчек 5 докинуть, не больше, нужно.
     
    #14 Fell-x27, 4 апр 2015
  15. sound

    sound Guest

    Fell-x27
    Изучил функцию Date, она для этого не подходит
    то есть получаться нужно делать примерно то что у меня и было просто арифметически делить секунды на 3600 чтоб получить часы и 60 чтоб получить минуты ?
     
    #15 sound, 5 апр 2015
  16. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Автор, в общем гляди, есть у меня полностью готовое решение. Было нефиг делать, дай думаю, запилю. Даже с той же формочкой, что твой монстр. И позволяющее вводить дату, чтобы отсчет велся от нее. И, в отличие от решения, которое ты взял не знаю где, но точно делал не сам, при остановке секундомера, действительно останавливает его. И после повторного запуска, начинает с того же места, а не как если бы остановки не было вовсе.

    Ну и кнопка "обнулить" у меня работает в реалтайме, не вызывая остановку выполнения.

    Но я хочу сначала увидеть хоть что-то, что ты сам пытался сделать за эти дни.

    Добавлено спустя 1 минуту 25 секунд:
    У нее до кучи есть методы. И да, она подходит прекрасно.
     
    #16 Fell-x27, 5 апр 2015
  17. sound

    sound Guest

    Вот сделал готовую функцию все работает как я и хотел
    функция Date точно тут не подходит не только мое мнение

    Код (Text):
    1. function     secudomer() {
    2.     var chasov = 0;
    3.     var minut = 0;
    4.     var sekund = 0;
    5.     var result = "";
    6.     var stopwatch_value = 0;
    7.     var interval;
    8.     this.start = function (start_from) {
    9.         stopwatch_value = start_from || 0;
    10.         interval = setInterval(function () {
    11.             stopwatch_value++;
    12.  
    13.  
    14.             chasov = Math.floor(stopwatch_value / 3600);
    15.             minut = Math.floor((stopwatch_value - chasov * 3600) / 60);
    16.             sekund = stopwatch_value - (chasov * 3600 + minut * 60);
    17.  
    18.             result = "<b>"+chasov + " часов " + minut + " мин " + sekund + " cек</b>";
    19.  
    20.  
    21.             var SummDok = document.getElementById('secudomer');
    22.             var SummDok1 = document.getElementById('secudomer1');
    23.             SummDok.innerHTML = result;SummDok1.innerHTML = result;
    24.  
    25.  
    26.  
    27.             // document.body.textContent = result;
    28.         }, 1000);
    29.     };
    30.  
    31.     this.stop = function () {
    32.         clearInterval(interval);
    33.     };
    34.  
    35.  
    36.  
    37. }
     
    #17 sound, 5 апр 2015
  18. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Оформи плз полностью, с формой, чтобы просто скопировать и проверить.

    И да, а где в твоем коде:

    Просто передать циферку - не совсем то, что ты описал.

    1) Объясни, почему.
    2) Как ты с датой работать собрался без нее?
    3) Даже в коде, который ты привел первым, используется Date.
     
    #18 Fell-x27, 5 апр 2015
  19. sound

    sound Guest

    Специально регнулся на jsfiddle.net, чтоб показать ))

    http://jsfiddle.net/sound777/y1040raa/1/

    в функцию передаю просто количество секунд, разницу с текущим временем сделал на пхп
     
    #19 sound, 6 апр 2015
  20. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ну..в плане форматирования вывода куда лучше и правильнее, чем код из первого поста. Смог адаптировать код, который был выдан позднее, молоток.

    Вот что я накидал:
    1) В поле ввода можно вводить дату в любом из известных стандартов. 2015-04-01 21:52:16 из первого поста подойдет. А можно хоть 1 april 2015 вбить.
    2) А можно не вводить, отсчет пойдет с нуля.
    3) Ну и кнопочки управления, мимими.
    4) И не требует сервер для пробивания стартовой точки. Полностью клиентсайд.
    https://jsfiddle.net/dmnxpjuh/
     
    #20 Fell-x27, 6 апр 2015
  21. sound

    sound Guest

    Fell-x27
    Спасибо хороший пример для изучения! ))
     
    #21 sound, 7 апр 2015
  22. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Наздоровье и успехов :)
     
    #22 Fell-x27, 7 апр 2015
    Brus_Fillis нравится это.
  23. Brus_Fillis

    Brus_Fillis Новичок

    С нами с:
    25 мар 2018
    Сообщения:
    1
    Симпатии:
    0
    Спасибо большое за код, парни, как раз искал что то подобное, а вы к довольно простому и изящному решению пришли.
     
    #23 Brus_Fillis, 25 мар 2018
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)