Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2020, 21:18
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 12

Как добавить миллисекунды в таймер обратного отсчета.
Помогите пожалуйста! Нагуглила, вот такой таймер обратного отсчета, подскажите пожалуйста, как в него добавить миллисекунды.
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var hours = Math.floor((t / (1000 * 60 * 60)) % 0);
  var seconds = Math.floor((t / 1000) % 5);
  var minutes = Math.floor((t / 1000 / 60) % 0);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 0);
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds,

  };
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var miliSeconds = Math.floor((t / 1000) % 60);
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds,

  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var hoursSpan = clock.querySelector(".hours");
  var minutesSpan = clock.querySelector(".minutes");
  var secondsSpan = clock.querySelector(".seconds");
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    if (t.total <= 0) {
     document.getElementById("header").className = "hidden";
    
      clearInterval(timeinterval);
      return true;
    }
 
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
  }
 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 60 * 30 * 1000);
initializeClock('countdown', deadline);

<div id="countdown" class="countdown">

  <div class="countdown-number">
    <span class="hours countdown-time"></span>
    <span class="countdown-text">Hours</span>
  </div>
  <div class="countdown-number">
    <span class="minutes countdown-time"></span>
    <span class="countdown-text">Minutes</span>
  </div>
  <div class="countdown-number">
    <span class="seconds countdown-time"></span>
    <span class="countdown-text">Seconds</span>
  </div>
   <div class="countdown-number">
    <span class="miliSeconds countdown-time"></span>
    <span class="countdown-text">Miliseconds</span>
  </div>
 
</div>

Последний раз редактировалось KatyJ, 31.03.2020 в 23:33.
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2020, 22:41
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 539

function getTimeRemaining(endtime) {
	var t = Date.parse(endtime) - Date.now();
	var total = t;
	var miliSeconds = t % 1000; 
	t = t / 1000 | 0;
	var seconds = t % 60; 
	t = t / 60 | 0;
	var minutes = t  % 60;
	t = t / 60 | 0;
	var hours = t ;
	return {
		'total': total,
		'hours': hours,
		'minutes': minutes,
		'seconds': seconds,
		'miliSeconds' : miliSeconds
	};
}
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2020, 23:04
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 12

Спасибо! Только сейчас у меня миллисекунды изменяются вперед и назад на одну еденицу. Подскажите пожалуйста, что делаю не так.
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var hours = Math.floor((t / (1000 * 60 * 60)) % 0);
  var seconds = Math.floor((t / 1000) % 5);
  var minutes = Math.floor((t / 1000 / 60) % 0);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 0);
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds,

  };
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var miliSeconds = Math.floor((t / 1000) % 60);
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds,

  };
}
function getTimeRemaining(endtime) {
	var t = Date.parse(endtime) - Date.now();
	var total = t;
	var miliSeconds = t % 1000; 
	t = t / 1000 | 0;
	var seconds = t % 60; 
	t = t / 60 | 0;
	var minutes = t  % 60;
	t = t / 60 | 0;
	var hours = t ;
	return {
		'total': total,
		'hours': hours,
		'minutes': minutes,
		'seconds': seconds,
		'miliSeconds' : miliSeconds
	};
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var hoursSpan = clock.querySelector(".hours");
  var minutesSpan = clock.querySelector(".minutes");
  var secondsSpan = clock.querySelector(".seconds");
   var miliSecondsSpan = clock.querySelector(".miliSeconds");
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    if (t.total <= 0) {
     document.getElementById("header").className = "hidden";
    
      clearInterval(timeinterval);
      return true;
    }
 
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
    miliSecondsSpan.innerHTML = ("0" + t.miliSeconds).slice(-2);
  }
 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 60 * 30 * 1000);
initializeClock('countdown', deadline);

Последний раз редактировалось KatyJ, 31.03.2020 в 23:26.
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2020, 23:13
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 12

Подскажите пожалуйста, куда еще нужно добавить изменения.

Последний раз редактировалось KatyJ, 31.03.2020 в 23:20.
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2020, 23:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,047

KatyJ,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2020, 23:28
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 12

Спасибо. Отформатировала. Буду очень благодарна, если Вы поможете мне в решении моей проблемы.

Последний раз редактировалось KatyJ, 31.03.2020 в 23:34.
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2020, 23:38
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 539

miliSecondsSpan.innerHTML = ("00" + t.miliSeconds).slice(-3);

И уберите первые две функции getTimeRemaining

Так
var timeinterval = setInterval(updateClock, 1000);
вы вызываете функцию (не чаще) каждую секунду. Если вас интересуют, как будут меняться миллисекунды, напишите хоть так
var timeinterval = setInterval(updateClock, 0);
Тогда минимальное время будет 4 мс

Последний раз редактировалось voraa, 31.03.2020 в 23:43.
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2020, 23:47
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 12

Спасибо огромное!!!! Всё работает! Очень помогли!!!
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2020, 23:57
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 539

А еще лучше так
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var hoursSpan = clock.querySelector(".hours");
  var minutesSpan = clock.querySelector(".minutes");
  var secondsSpan = clock.querySelector(".seconds");
   var miliSecondsSpan = clock.querySelector(".miliSeconds");
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    if (t.total <= 0) {
     document.getElementById("header").className = "hidden";
      return true;
    }
 
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
    miliSecondsSpan.innerHTML = ("00" + t.miliSeconds).slice(-3);
    requestAnimationFrame(updateClock);
  }
 
  requestAnimationFrame(updateClock);
}


requestAnimationFrame - вызывает функцию перед обновлением экрана, когда браузер это сможет сделать. Чаще ее вызывать смысла не имеет. На современных компьютерах это 60 раз в секунду.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер обратного отсчета (мин:сек:мсек) rudoy24 Общие вопросы Javascript 1 20.10.2016 18:41
#help Таймер обратного отсчета и куки poroxprod Общие вопросы Javascript 0 11.04.2014 13:46
Таймер обратного отсчета Timmermans Общие вопросы Javascript 3 02.04.2014 15:53
Таймер обратного отсчёта useruser Элементы интерфейса 5 04.11.2013 05:29
таймер обратного отсчёта AdDa Элементы интерфейса 10 05.11.2012 20:06