Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2018, 22:09
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 96

Добавление в таймер миллисекунд
Нагуглил скрипт таймера с возможностью указать время старта и окончания.
Подскажите, плиз, как добавить, например, в <span class="milliseconds"></span> анимацию миллисекунд (00-99)?


(function($){
  var date    = new Date(),
      month   = date.getMonth();
      day     = date.getDate(),
      weekDay = date.getDay(),
      hours   = {
        start: new Date(date.getFullYear(), month, day),
        end: new Date(date.getFullYear(), month, day)
      };
	  
    hours.start.setHours(8);
    hours.end.setHours(23);

  function countDown(){
    var date         = new Date(),
        countHours   = ('0' + (hours.end.getHours() - date.getHours())).substr(-2),
        countMinutes = ('0' + (59 - date.getMinutes())).substr(-2),
        countSeconds = ('0' + (59 - date.getSeconds())).substr(-2);

    if(date.getHours() < hours.start.getHours() || date.getHours() > hours.end.getHours()){
      $('.countdown').hide();
    } else if($('.countdown').not(':visible')){
      $('.countdown').show();
    }

    $('.countdown .hours').text(countHours);
    $('.countdown .minutes').text(countMinutes);
    $('.countdown .seconds').html(countSeconds);

  }

  $(function(){
    setInterval(function(){
      countDown();
    }, 1000);
  });
})(jQuery);


<div class="countdown">
<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2018, 00:38
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="countdown">
	<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>:<span class="ms"></span>
</div>
<script>
	(function($){
		var date    = new Date(),
		month   = date.getMonth();
		day     = date.getDate(),
		weekDay = date.getDay(),
		hours   = {
			start: new Date(date.getFullYear(), month, day),
			end: new Date(date.getFullYear(), month, day)
		};

		hours.start.setHours(0);
		hours.end.setHours(23);

		function countDown(){
			var date         = new Date(),
			countHours   = ('0' + (hours.end.getHours() - date.getHours())).substr(-2),
			countMinutes = ('0' + (59 - date.getMinutes())).substr(-2),
			countSeconds = ('0' + (59 - date.getSeconds())).substr(-2),
			countMs = (999 - date.getMilliseconds()+''), len = countMs.length;
			countMs = len === 3 ? countMs.substr(0,2) : len === 2 ? ('0'+countMs).substr(0,2) : ('00'+countMs).substr(0,2);

			if(date.getHours() < hours.start.getHours() || date.getHours() > hours.end.getHours()){
				$('.countdown').hide();
			} else if($('.countdown').not(':visible')){
				$('.countdown').show();
			}

			$('.countdown .hours').text(countHours);
			$('.countdown .minutes').text(countMinutes);
			$('.countdown .seconds').text(countSeconds);
			$('.countdown .ms').text(countMs);
			$('.ms2').text(countMs2);

		}

		$(function(){
			setInterval(function(){
				countDown();
			}, 10);
		});
	})(jQuery);

</script>

Последний раз редактировалось j0hnik, 02.10.2018 в 01:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Socket.io Асинхронный таймер monstantin AJAX и COMET 1 04.05.2018 00:48
Индивидуальный таймер обратного отсчета времени с редиректом pozitiv4ek Работа 2 11.12.2016 13:42
Таймер на вкладках в Хроме. YNA Opera, Safari и др. 1 28.01.2016 02:43
Обновляемый таймер на javascript smillyhamster Общие вопросы Javascript 1 31.12.2013 10:30
ОБЬЯВЛЯЕТСЯ КОНКУРС НА САМЫЙ ЛУЧШИЙ ОБРАТНЫЙ ТАЙМЕР Livanderiaamarum Общие вопросы Javascript 44 07.10.2012 13:51