Простой таймер обратного отсчёта до конца суток на JavaScript

Удивительно, но скриптов обратного отсчёта именно до конца суток не так уж много на просторах. А ещё мне нужен был простейший, который можно вставить прямо в текст, без дополнительных визуальных наворотов.

В итоге пришлось собирать свой скрипт из нескольких. Благо начал более плотно изучать JavaScript, что позволило разобраться в чужом коде.

Готовый скрипт обратного отсчёта

После завершения отсчёта таймер автоматически сбрасывается и отсчёт начинается заново.

function update() {
  var dt = new Date
  var tz = dt.getTimezoneOffset()
  var now = Math.floor(dt / 1000 - tz * 60)
  var next = Math.ceil((dt / 1000 / 60 - tz) / 60 / 24) * 60 * 60 * 24
  var left = next - now
  var hours = ~~ (left/60/60)
  var mins = ~~(left/60%60)
  var secs = ~~(left%60)
  var outputTimer = ("0" + hours).slice(-2) + "<span class='blink'> : </span>" + ("0" + mins).slice(-2) + "<span class='blink'> : </span>" + ("0" + secs).slice(-2)
  document.getElementById("timer").innerHTML = outputTimer
}

update()
setInterval(update, 1000)

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

В качестве разделителей я добавил мерцающие двоеточия:

"<span class='blink'> : </span>"

Но вы можете переделать на свой лад. Например, чтобы получить вид вроде «7 ч 39 мин 40 сек», переменная outputTimer будет выглядеть так:

var outputTimer = ("0" + hours).slice(-2) + " ч " + ("0" + mins).slice(-2) + " мин " + ("0" + secs).slice(-2) + " сек"

CSS для мерцающих двоеточий-разделителей:

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
}

Ну и, чтобы вывести таймер, в нужном месте добавьте:

<span id="timer"></span>

Источники, в которых я взял исходный код для своего таймера: StackOverflow, IT-Blog.