JSFiddle - React, Tailwind, and code Playground
HTML
<div id="countdown" ></div>
<div id="countdown1" ></div>
JavaScript
fetch("https://cors-anywhere.herokuapp.com/http://worldclockapi.com/api/json/utc/now")
.then(response => response.json())
.then(v => new Date(v.currentDateTime))
.then(processDate);
function processDate(serverDate) {
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const WEEK = 7 * DAY;
const MOSCOW_ZONE = 3 * HOUR;
const EVENT_TIME = DAY + 19 * HOUR - MOSCOW_ZONE;
const clientDate = new Date();
const now = serverDate.getTime() - clientDate.getTime();
clockTick();
function clockTick() {
const date = new Date(Date.now() + now);
const eventDate = new Date(Math.ceil((date.getTime() - EVENT_TIME) / WEEK) * WEEK + EVENT_TIME);
const dt = eventDate - date;
if(dt > WEEK - 30 * MINUTE) {
document.getElementById("countdown").innerHTML =
"Добро пожаловать!!!";
} else if(dt > WEEK - 6 * HOUR) {
document.getElementById("countdown").innerHTML =
"Следующий синхрон через неделю.";
} else {
var days = Math.floor(dt / DAY);
var hours = Math.floor(dt / DAY);
var hours = toPaddedString(Math.floor((dt % DAY) / HOUR));
var minutes = toPaddedString(Math.floor((dt % HOUR) / MINUTE));
var seconds = toPaddedString(Math.floor((dt % MINUTE) / SECOND));
document.getElementById("countdown1").innerHTML =
`До начала синхрона осталось: ${days} дн. ${hours}:${minutes}:${seconds}`;
}
setTimeout(clockTick, 500);
}
function toPaddedString(s) {
return (s < 10 ? "0" : "") + s;
}
}