Обратный отсчёт

.markdown

Обратный отсчёт

A Pen by XCanG on CodePen.

License.

index.html

<div class="wrap">
	Осталось
	<div class="timer"></div>
</div>

script.js

const timer = document.querySelector(".timer"),
	  time = Date.UTC(2019, 11, 20, 3, 0, 0);

const update_timer = () => {
	const dt = time - Date.now();
	let t;
	if (dt < 0) {
		clearInterval(updating);
		timer.innerText = "1";
	} else {
		const d = parseInt(dt / 86400000),
			  h = (parseInt(dt / 3600000) % 24).toString().padStart(2, "0"),
			  m = (parseInt(dt / 60000) % 60).toString().padStart(2, "0"),
			  s = (parseInt(dt / 1000) % 60).toString().padStart(2, "0"),
			  ms = (dt % 1000).toString().padStart(3, "0");
		if (d > 0) {
			let ds;
			if (d >= 5) {
				ds = `${d} дней`;
			} else if (d >= 2) {
				ds = `${d} дня`;
			} else {
				ds = `${d} день`;
			}
			t = `${ds} ${h}:${m}:${s}.${ms}`;
		} else {
			t = `${h}:${m}:${s}.${ms}`;
		}
		//console.log(t);
		timer.innerText = t;
	}
};

var updating = setInterval(update_timer, 100);

style.css

body {
	min-height: 100vh;
	oveflow: hidden;
	background-color: #2D303A;
	color: #ffffff;
	text-shadow: 0 0 4px #000000;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(5vh + 2vw);
	font-weight: 600;
	text-align: center;
}
.wrap {
	width: 100vw;
	height: 100vh;
	display: grid;
	align-content: center;
	justify-content: center;
}
.timer {
	font-weight: 300;
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600&amp;display=swap" rel="stylesheet" />