Javascript count down to UTC 4am every day & every Sunday

I am building a resource for an MMORPG (game) that has daily and weekly resets. One reset is every Sunday @ 4am UTC and another is every day @ 4am UTC. I am looking to display countdown timers at the top of a page for these resets.

This Javascript code below counts down to midnight each day. How can I modify this code so I can build 2 countdowns. 1 that counts down to 4am UTC (daily) and another that counts down to 4am UTC every Sunday?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var div = document.getElementById("bb");

setInterval(function() { 
    var toDate = new Date();
    var tomorrow = new Date();
    tomorrow.setHours(24, 0, 0, 0);
    var diffMS = tomorrow.getTime() / 1000 - toDate.getTime() / 1000;
    var diffHr = Math.floor(diffMS / 3600);
    diffMS = diffMS - diffHr * 3600;
    var diffMi = Math.floor(diffMS / 60);
    diffMS = diffMS - diffMi * 60;
    var diffS = Math.floor(diffMS);
    var result = ((diffHr < 10) ? "0" + diffHr : diffHr);
    result += ":" + ((diffMi < 10) ? "0" + diffMi : diffMi);
    result += ":" + ((diffS < 10) ? "0" + diffS : diffS);
    div.innerHTML = result;
},1000);

<!-- language: lang-html -->

<div id="bb">
</div>

<!-- end snippet -->

I've written this code below using what you had already:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var div = document.getElementById("bb");
var div2 = document.getElementById("bc");
setInterval(function() { 
var toDate = new Date();
var timezoneOffset =  toDate.getTimezoneOffset() / 60; // difference in hours from GMT
var tomorrow = new Date();
tomorrow.setHours(28, 0, 0);
var diffMS = tomorrow.getTime() / 1000 - toDate.getTime() / 1000;
var diffHr = Math.floor(diffMS / 3600);
diffMS = diffMS - diffHr * 3600;
var diffMi = Math.floor(diffMS / 60);
diffMS = diffMS - diffMi * 60;
var diffS = Math.floor(diffMS);
diffHr -= timezoneOffset;
var result = ((diffHr < 10) ? "0" + diffHr : diffHr);
result += ":" + ((diffMi < 10) ? "0" + diffMi : diffMi);
result += ":" + ((diffS < 10) ? "0" + diffS : diffS);
div.innerHTML = result;
var nextSunday = getNextSunday(new Date());
nextSunday.setHours(4, 0, 0);
diffMS = nextSunday.getTime() / 1000 - toDate.getTime() / 1000;
diffHr = Math.floor(diffMS / 3600);
diffMS = diffMS - diffHr * 3600;
diffMi = Math.floor(diffMS / 60);
diffMS = diffMS - diffMi * 60;
diffS = Math.floor(diffMS);
diffHr -= timezoneOffset;
result = ((diffHr < 10) ? "0" + diffHr : diffHr);
result += ":" + ((diffMi < 10) ? "0" + diffMi : diffMi);
result += ":" + ((diffS < 10) ? "0" + diffS : diffS);
div2.innerHTML = result;
}, 1000);
function getNextSunday(d) {
var t = new Date(d);
t.setDate(d.getDate() + (7 - d.getDay()) % 7);
return t;
}

<!-- language: lang-html -->

<div id="bb">
</div>
<div id="bc">
</div>

<!-- end snippet -->

Firstly, I made a small change to add 4 hours to tomorrow so that it's set for 4 am, instead of midnight.

Afterwards, I just added another div where I can put the time between now and Sunday at 4 am and a function to get the date for the next Sunday at the bottom.

I added an offset for the UTC conversion which is applied at the end. After that, the code is almost identical to what you had already written!

Try this code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var dailyResetDiv = document.getElementById("dailyReset");
var weeklyResetDiv = document.getElementById("weeklyReset");
function updateCountdown(targetDate, outputElement) {
var now = new Date();
var diffMS = targetDate.getTime() - now.getTime();
var diffHr = Math.floor(diffMS / 3600000);
diffMS = diffMS - diffHr * 3600000;
var diffMi = Math.floor(diffMS / 60000);
diffMS = diffMS - diffMi * 60000;
var diffS = Math.floor(diffMS / 1000);
var result =
(diffHr < 10 ? "0" + diffHr : diffHr) +
":" +
(diffMi < 10 ? "0" + diffMi : diffMi) +
":" +
(diffS < 10 ? "0" + diffS : diffS);
outputElement.innerHTML = result;
}
setInterval(function () {
// Daily reset at 4am UTC
var dailyReset = new Date();
dailyReset.setUTCHours(4, 0, 0, 0);
updateCountdown(dailyReset, dailyResetDiv);
// Weekly reset on Sunday at 4am UTC
var weeklyReset = new Date();
weeklyReset.setUTCHours(4, 0, 0, 0);
var dayOfWeek = weeklyReset.getUTCDay();
if (dayOfWeek !== 0) {
// If not Sunday, adjust the date to the next Sunday
weeklyReset.setUTCDate(weeklyReset.getUTCDate() + (7 - dayOfWeek));
}
updateCountdown(weeklyReset, weeklyResetDiv);
}, 1000);

<!-- language: lang-html -->

<div id="dailyReset"></div>
<div id="weeklyReset"></div>

<!-- end snippet -->

You could try an OOP approach by creating a timer class. You would only need to compute the target date once. The timer will call the render function on an interval.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

const localTimeEl = document.querySelector('#local-time');
const utcTimeEl = document.querySelector('#utc-time');
const timerEl1 = document.querySelector('#timer-1');
const timerEl2 = document.querySelector('#timer-2');
const timerEl3 = document.querySelector('#timer-3');
const main = () => {
// Local Time
looper(() => { localTimeEl.textContent = getLocaleTimeString(); }, 1000);
// UTC Time
looper(() => { utcTimeEl.textContent = getLocaleTimeString('UTC'); }, 1000);
// Every day
const timer1 = new CountdownTimer({
time: '04:00',
timeZone: 'UTC',
renderFn: (duration) => {
timerEl1.textContent = formatDuration(duration);
}
}).start();
// Next Sunday
const timer2 = new CountdownTimer({
time: '04:00',
timeZone: 'UTC',
dayOfWeek: 0,
renderFn: (duration) => {
timerEl2.textContent = formatDuration(duration);
}
}).start();
// Today
const timer3 = new CountdownTimer({
time: '12:00',
timeZone: 'PDT',
isToday: true,
renderFn: (duration) => {
timerEl3.textContent = formatDuration(duration);
}
}).start();
};
const looper = (callback, ms) => {
setInterval(callback, ms);
callback();
};
const getLocaleTimeString = (timeZone) =>
new Date().toLocaleString('en-US', { timeZone });
const parseDuration = (duration) => {
duration = +duration;
const days = Math.floor(duration / 8.64e7);
duration %= 8.64e7;
const hours = Math.floor(duration / 3.6e6);
duration %= 3.6e6;;
const minutes = Math.floor(duration / 6e4);
duration %= 6e4;
const seconds = Math.floor(duration / 1e3);
return { days, hours, minutes, seconds };
}
const applyUnit = (value, singular, plural) =>
value > 0
? value + (value === 1 ? ` ${singular}` : ` ${plural}`)
: null;
const formatDurationFull = (duration) => {
const { days, hours, minutes, seconds } = parseDuration(duration);
return [
applyUnit(days, 'day', 'days'),
applyUnit(hours, 'hour', 'hours'),
applyUnit(minutes, 'minute', 'minutes'),
applyUnit(seconds, 'second', 'seconds'),
].filter(v => v).join(', ');
};
const formatDurationSimple = (duration) => {
const { days, hours, minutes, seconds } = parseDuration(duration);
return [ days, hours, minutes, seconds ]
.map(v => v.toString().padStart(2, '0')).join(':');
};
const formatDuration = (duration) =>
duration > 0
? `${formatDurationSimple(duration)} (${formatDurationFull(duration)})`
: 'Expired';
const getDateNextWeek = (date, dayOfWeek = 0) => {
const currentDate = new Date(date);
currentDate.setDate(currentDate.getDate() + (7 - currentDate.getDay() + dayOfWeek) % 7);
return currentDate;
};
const getTomorrow = (date) => {
const currentDate = new Date(date);
currentDate.setDate(currentDate.getDate() + 1);
return currentDate;
};
class CountdownTimer {
constructor(options) {
const opts = { ...options };
this.time = opts.time;
this.timeZone = opts.timeZone;
this.dayOfWeek = opts.dayOfWeek;
this.renderFn = opts.renderFn;
this.isToday = opts.isToday ?? false;
this.targetDate = this.computeTargetDate();
}
start() {
this.stop();
this.update();
this.intervalId = setInterval(this.update.bind(this), 1000);
return this;
}
stop() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.intervalId = undefined;
return this;
}
update() {
this.renderFn(this.targetDate - new Date());
}
// 2019-01-01T00:00:00.000+00:00
computeTargetDate() {
const now = new Date();
const timeTokens = this.time.split(':').map(value => +value);
const futureHour = timeTokens[0] ?? 0;
const futureMinute = timeTokens[1] ?? 0;
const futureSecond = timeTokens[2] ?? 0;
const timeZone = this.parseTimeZone(this.timeZone);
let targetDate;
if (this.isToday) {
targetDate = now;
} else {
if (this.dayOfWeek === undefined) {
targetDate = getTomorrow(now);
} else {
targetDate = getDateNextWeek(now, this.dayOfWeek);
}
}
const y = targetDate.getUTCFullYear();
const m = (targetDate.getUTCMonth() + 1).toString().padStart(2, '0');
const d = targetDate.getUTCDate().toString().padStart(2, '0');
const H = futureHour.toString().padStart(2, '0');
const M = futureMinute.toString().padStart(2, '0');
const s = futureSecond.toString().padStart(2, '0');
const ts = `${y}-${m}-${d}T${H}:${M}:${s}${timeZone}`;
console.log(`Countdown target date: ${ts}`);
return Date.parse(ts);
}
parseTimeZone(timeZone) {
const offsetMinutes = this.timeZoneToMinutes(timeZone);
if (offsetMinutes == null) return '';
const sign = offsetMinutes < 0 ? '-' : '+';
const h = Math.abs(offsetMinutes / 60).toString().padStart(2, '0');
const m = Math.abs(offsetMinutes % 60).toString().padStart(2, '0');
return `${sign}${h}${m}`;
}
timeZoneToMinutes(timeZone) {
switch (timeZone) {
case 'UTC':
case 'GMT':
return 0;
case 'EDT': return -240;
case 'EST': return -300;
case 'CDT': return -300;
case 'CST': return -360;
case 'MDT': return -360;
case 'MST': return -420;
case 'PDT': return -420;
case 'PST': return -480;
default:
return null;
}
}
}
main();

<!-- language: lang-css -->

h2 { margin: 0; padding: 0; margin-top: 0.25rem; font-size: 1.25rem; }
.grid { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; }

<!-- language: lang-html -->

<div class="grid">
<h2>Local Time</h2>
<div id="local-time"></div>
<h2>UTC Time</h2>
<div id="utc-time"></div>
</div>
<h2>Tomorrow @ 4am UTC</h2>
<div id="timer-1"></div>
<h2>Sunday @ 4am UTC</h2>
<div id="timer-2"></div>
<h2>Today @ 12pm PDT (-07:00)</h2>
<div id="timer-3"></div>

<!-- end snippet -->