Как добавить миллисекунды в таймер обратного отсчета.

[KatyJ]

Помогите пожалуйста! Нагуглила, вот такой таймер обратного отсчета, подскажите пожалуйста, как в него добавить миллисекунды.

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>

[voraa]

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
	};
}

[KatyJ]

Спасибо! Только сейчас у меня миллисекунды изменяются вперед и назад на одну еденицу. Подскажите пожалуйста, что делаю не так.

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]

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

[рони]

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[KatyJ]

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

[voraa]

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

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

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

[KatyJ]

Спасибо огромное!!!! Всё работает! Очень помогли!!!

[voraa]

А еще лучше так

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 раз в секунду.