За последние 24 часа нас посетили 17436 программистов и 1712 роботов. Сейчас ищет 1601 программист ...

Таймеры на странице

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

  1. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Есть скрипт таймера. Выкладывать весь, думаю, смысла нет. Таймер выводится так:
    Код (PHP):
    1. $("#clock").html(day+':'+hour+':'+min+':'+sec); 
    Т.е. таймер выводится в элементе с идентификатором clock.
    Для того, чтобы вывести еще один таймер на той же странице с другим отсчетом, мне приходится на странице html прописывать еще один элемент с другим идентификатором, например, clock2:
    Код (PHP):
    1. $("#clock2").html(day+':'+hour+':'+min+':'+sec); 
    Как реализовать вывод на странице неопределенного количества таймеров, если они с разным отсчетом времени? Например, пользователь в он-лайн игре отправляет юнита из точки А в точку Б и при этом запускается таймер времени прибытия этого юнита. Один таймер вывести – не проблема, но если пользователь отправит N – количество юнитов, т.е. если нужно вывести N-количество таймеров с разным отсчетом времени – как такое можно сделать?

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Может быть и нет, но в принципе, именно от него зависит возможность реализации мультитаймера. Вот, набросал простой пример, который, при желании, можно расширить, доработать под свои нужды.
    Код (PHP):
    1. Timer 1: <span class="timer"></span><button>Start</button><br>
    2. Timer 2: <span class="timer"></span><button>Start</button><br>
    3. Timer 3: <span class="timer"></span><button>Start</button><br>
    Код (PHP):
    1. (function(){
    2.     $.fn.multitimer = function(){
    3.         var methods = {
    4.             init: function(i, el){
    5.                 var o = this;
    6.                 $(el).on('click', function(){
    7.                     o.start(i, $(this).hide().prev('span').text(0));
    8.                 });
    9.             },
    10.             start: function(i, el){
    11.                 this.clear(i);
    12.                 this.increase(el);
    13.                 this.intervals[i] = setInterval(this.increase, 1000, el);
    14.             },
    15.             increase: function(el){
    16.                 el.text(parseFloat(el.text()) + 1);
    17.             },
    18.             clear: function(i){
    19.                 clearInterval(this.intervals[i]);
    20.             },
    21.             intervals: []
    22.         };
    23.         return this.each(function(i){ methods.init(i,this); });
    24.     };
    25. })();
    26. $('button').multitimer(); 
     
  3. Fell-x27

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

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

    Поставь интервал в 1 миллисекунду и запусти такой таймер параллельно с реальным секундомером. Увидишь разницу очень быстро.

    Чтобы такого не было, при каждом вызове increase() нужно добавлять к текущему значению не единичку, а разницу между временем последнего вызова и временем вызова текущего. То есть ты, по факту добавишь реально прошедшее время, а не количество вызовов функции.

    То есть, по сути, таймер собран правильно, но increase() надо чуть переписать.
     
  4. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Твой таймер - сломать мозг можно, без обид, выкладываю свой таймер обратного отсчета, посмотри его, плиз, может, ты со свежей головой, идейку подкинешь, ибо мой мозг уже кипит:
    script.js:
    Код (PHP):
    1. $(document).ready(function () {
    2.  
    3. function get_timer(d,obj) {
    4.  
    5.     //obd - переменная хранит идентификатор элемента, в который выводим таймер
    6.     //d - переменная хранит дату и время, до которого таймер ведет обратный отсчет
    7.  
    8.     this.date_future = new Date(d);
    9.     this.date = new Date();
    10.     this.timer = this.date_future - this.date;
    11.     
    12.     if(this.timer > 0) {
    13.         this.day = parseInt(this.timer/(60*60*1000*24));            
    14.         this.hour = parseInt(this.timer/(60*60*1000))%24;
    15.         this.min = parseInt(this.timer/(1000*60))%60;            
    16.         this.sec = parseInt(this.timer/1000)%60;
    17.  
    18.         
    19.         $(obj).html(this.day+':'+this.hour+':'+this.min+':'+this.sec+'<BR>');
    20.         
    21.         setTimeout(function() { return get_timer(d,obj); },1000);
    22.  
    23.     }
    24.     else {
    25.          $("#clock").html("<span id='stop'>Отсчет закончен</span>");
    26.     }
    27. }
    28. });
    29.  
    функцию таймера вызываю из html.php:
    Код (PHP):
    1. <?php
    2. $date1=date("m").','.date("d").','.date("Y").' '.(date("H")+2).':'.date("i").':'.date("s");
    3. $date2 = date("m").','.date("d").','.date("Y").' '.(date("H")+1).':'.date("i").':'.date("s");
    4. $obj1='#clock';
    5. $obj2='#clock2';
    6. ?>
    7.  
    8. <div id="clock"></div>
    9. <div id="clock2"></div>
    10.  
    11. <SCRIPT LANGUAGE="JavaScript">
    12. tt = new get_timer("<? echo $date1; ?>","<? echo $obj1; ?>");
    13. tt2 = new get_timer("<? echo $date2; ?>","<? echo $obj2; ?>");
    14. </SCRIPT>
    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  5. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Его таймер написан так, как его писал бы человек, знающий JS.
    В то же время твой таймер написан так, как его писал бы человек, не знающий JS, и, по этому, пишущий на JS как на PHP или любом другом знакомом языке. И по этому код, который написал Deonis, выносит тебе мозг. Лично для меня он вполне логичен и очевиден.

    И да, тебя не смущает, что у тебя код с неразматывающейся вечной рекурсией из-за таймаутов? У Deonis в коде SetInterval не для красоты стоит. И ты не учел проблему, которую я описывал выше.
     
  6. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Таймер, который я скинул, - сомневаюсь, что написал его невежда. Источник здесь: http://webformyself.com/tajmer-obratnogo-otscheta-dlya-sajta/
    о чем ты?
    В моем таймере нет increase().
    Если тебя не затруднит, покажи, что не так именно в моем примере таймера.
     
  7. Fell-x27

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

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

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

    И писал бы на JS как на JS, а не как на PHP. То, что он решил, что может учить других, не делает его гуру. Это лишь самомнение, не более.
     
  8. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Код (PHP):
    1.       this.day = parseInt(this.timer/(60*60*1000*24));         
    2.       this.hour = parseInt(this.timer/(60*60*1000))%24;
    3.       this.min = parseInt(this.timer/(1000*60))%60;         
    4.       this.sec = parseInt(this.timer/1000)%60;
    5.  
    - ну если ты раскритиковал этот кусок кода, то будь, плиз, последователен, напиши, как нужно сделать правильно..
    И хотелось бы услышать ответ на главной вопрос этой темы. Если он (ответ) есть.

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    главное, чтобы работало
     
  10. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Эхехе. У Date куча нативных методов для возврата минут, секунд и даже дня недели. https://learn.javascript.ru/datetime

    Добавлено спустя 2 минуты 46 секунд:
    Вот, держи, я давно уже писал одному падавану как пример. Тоже таймер. Считающий от миллисекунд до годов. С функцией паузы и сброса. Правда, там куда-то отступы поплыли после обновления JSFiddle. Но не суть. Да, там тоже есть громоздкая конструкция весьма, но она продиктована хитровыбоенными требованиями к форматированию вывода. Плюс, оно умеет считать от указанного времени.В поле ввода можно вводить дату в любом из известных стандартов. Можно хоть 1 april 2015 вбить.
     
  11. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    гм, интересно..
    А если переводить миллисекунды в дни, часы, минуты и секунды моим способом, то в чем будет проигрыш? Будет выше нагрузка на процессор? Или это в принципе не корректное написание кода? Или еще что-то? Ведь мой скрипт- то работает. Но твой вариант мне нравится больше.
     
  12. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ну гляди. Можно зубы дергать через рот. А можно через зад. И то и то работает. Но через рот правильно, а через зад нет. Вопрос удобства. Если уже есть инструменты, которые делают что-то, зачем самому их заново изобретать? :)

    Нет, для общего развития и понимания оно может и полезно, но, как вариант, точное время, прошедшее с такой-то вот даты ты так не посчитаешь. Просто потому, что месяц это не 31 день. Есть месяцы и по 30, а есть вообще февраль. Ты сможешь посчитать только до дней. Количество месяцев и дней ты уже посчитать не сможешь точно в сумме.

    Вообще для дат лучше никогда не городить костыли. Даты это грабли. Ты миллисекунды считаешь в десятичной системе. Секунды и минуты в шестидесятиричной(!), в то время как часы в двадцатьчетыричной. Дни при этом в тридцати/тридцатиодно\двадцативосьми\двадцатидевяти- ричных системах в зависимости от того, в какой месяц они перешли, а месяцы в тринадцатиричной. При том, что месяцы складываются в десятичные годы. Подумай об этом.

    Как по мне, для работы с этим лучше использовать готовые решения.
     
  13. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    да, согласен, полностью.
     
  14. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Братан, я опять с тобой вынужден не согласиться. Опять и снова :)
    Эти 4 строки в моем примере таймера, о которых мы с тобой говорили, они вычисляют НЕ дату (и время), а разницу между двумя датами, между будущей датой и настоящей:
    Код (PHP):
    1. day = parseInt(timer/(60*60*1000*24));            
    2. hour = parseInt(timer/(60*60*1000))%24;
    3. min = parseInt(timer/(1000*60))%60;            
    4. sec = parseInt(timer/1000)%60;
    5.  
    В переменной timer хранится разница в секундах между двумя датами:
    Код (PHP):
    1. //date_future - хранит заданную дату и время, до которого таймер будет считать.
    2. date_future = new Date("12,13,2015 14:58:08");
    3.  
    4. //date - хранит настоящее дату и время.
    5. date = new Date();
    6.  
    7. //timer - разница в секундах.
    8. timer = date_future - date;
    9.  
    Если верхние 4 строки переписать по твоему примеру, т.е. вот так:
    Код (PHP):
    1. day = date_future.getDate()-date.getDate();
    2. hour = date_future.getHours()-date.getHours();
    3. min = date_future.getMinutes()-date.getMinutes();
    4. sec = date_future.getSeconds()-date.getSeconds();
    5.  
    То в таймере будут отрицательные значения времени. Например: если в переменной date_future будет указано время на 1 час больше настоящего, а минуты - на 5 меньше, то счетчик будет тикать с отрицательным значением. Т.е. если в переменной date_future время будет, допустим, 13:40, а в переменной date - 12:45, то счетчик выдаст минус из-за разницы минут: 40 мин. - 45 мин. = -5 мин.
    Твой пример хорош, но, думаю, не в этом случае.

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  15. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    То, что ты написал, никак не относится к моему примеру.
    Просто из одной даты вычитай другую, а потом просто получай нужную ее компоненту.
    Посмотри внимательней, как это у меня работает. И что там происходит.
    Повбивай даты месяц назад или с начала месяца. Все работает. И никаких отрицательных значений. И никаких вычитаний компонент дат друг из друга. Вбей туда 1 december 2015 или любую другую дату в таком виде. И посмотри, как оно считает.
     
  16. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    так в том и дело, что в твоем таймере этого нет. Твой и мой таймеры принципиально разные. Твой считает без конца, пока пользователь сам его не остановит, а в моем случае - считает до определенной даты и времени, из-за чего в моем примере вычисляется разница в секундах, которая затем переводится в часы и т.д.
    ну так это и делается в моем таймере:
    Код (PHP):
    1. date_future = new Date(d);
    2. date = new Date();
    3. timer = date_future - date;
    4.  
    timer получает разницу в секундах.

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  17. Fell-x27

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

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

    if (время старта+прошедшее_время==время_остановки){стопори()} вместо нажатия на кнопку?
     
  18. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Неа, в том, что у тебя считает вперед, так сказать, на возрастание ( т.е. 0,1,2,3 и т.д.), а у меня тикает в обратную сторону (9,8,7 и т.д.), на убывание, пока не достигнет заданной даты. И поэтому, в моем случае, нужно интервалом в секунду отображать оставшееся время от начала отсчета до заданного. Именно оставшееся время. А как его можно определить иным способом?
     
  19. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ну а в чем проблема вычитать время, я не пойму? Ну получается оно отрицательное, дальше что? Плюсуй отрицательное время, получишь вычитание.
     
  20. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    заморочено уж слишком.
    Напиши мне в пример одной строкой, как это можно сделать, если не трудно.
     
  21. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    A+(-B) = A-B же.
    Сильно ты издалека заходишь с просьбой написать тебе рабочий вариант, если честно:)
    Если вечером будет время, ок, помогу.
     
  22. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Почему не работает ?:
    Код (PHP):
    1. <form>
    2. <button>START</button>
    3. </form>
    4.  
    5. <script type ="text/javascript">
    6. $(function(){
    7.  
    8.     $('button').on({click: function(e) {
    9.         var war = $(this);
    10.         war.document.write('ura');
    11. }
    12. });
    13. });
    14. </SCRIPT>
     
  23. Fell-x27

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

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    А на каком языке это написано? Это не чистый JS. И не JQuery. По этому и не работает, наверное.

    P.S. 6000й пост на форуме. Юбилей, однако.
     
  24. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    JQuery вроде такой синтаксис тоже может юзать.
     
  25. elvisok2015

    elvisok2015 Новичок

    С нами с:
    17 окт 2015
    Сообщения:
    37
    Симпатии:
    0
    Это JQuery. Вот ссылочка на урок по обработчикам событий: http://jquery.page2page.ru/index.php5/On
    В чем я ошибся, кто разбирается? Прошу помощи.
    Код (PHP):
    1. <html>
    2. <head>
    3. <meta http-equiv="content-type" content="text/html" charset="windows-1251"> 
    4. <script type="text/javascript" src="js/jquery-2.1.4.js"></script>    
    5. <title></title>
    6. </head>
    7. <body>
    8.  
    9. <form>
    10. <button>START</button>
    11. </form>
    12.  
    13. <script type ="text/javascript">
    14. $(document).ready(function () {
    15.  
    16.     $('button').on({click: function(e) {
    17.         var ww = $(this);
    18.         ww.document.write('www');
    19.   },
    20.   mouseenter: function() {
    21.     // действия в ответ на наведение мыши на элемент
    22.   }
    23. });
    24. });
    25. </SCRIPT>
    26.  
    27. </body>
    28. </html>