We Keep Coding

JavaScript countdown timer for every Monday, Wednesday and Friday at 2000 hrs

I am trying to create a countdown timer for every Monday, Wednesday and Friday at 2000 hours in JavaScript.
Countdown is working till 2000 hours but after that its not working and also I can't figure out how to switch week i.e. Friday to switch next Monday as there are 3 days count and normal in week there are two days and also I don't want to show days.
I want to convert days into hours and my UI is like 47h 59m 50s this.
I would be grateful if anyone can figure out how to create this countdown.
const gameCountdown = setInterval(function() {
var gameDay;
var currentDateTime = new Date();
var currentDay = currentDateTime.getDay();
var currentTime = currentDateTime.getTime();
var gameTime = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate(), 20, 0, 0); // current day 8pm
var gameDay = (currentDay % 2 === 0) ? currentDay + 1 : currentDay;
if ((currentDay === gameDay) && (gameTime.getHours() >= 20)) {
gameTime = currentDateTime.setDate(currentDateTime.getDate() + 2);
}
var countdownTime = gameTime.getTime();
var difference = parseInt((countdownTime - currentTime));
if (difference > 0) {
var hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
} else {
var hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
}
}, 1000);
<span id="hours"></span>
<span id="min"></span>
<span id="sec"></span>

Does this work for you?
const getGameTime = (currentTime) => {
let gameDate = new Date(currentTime)
let offset = 0;
if (gameDate.getHours() >= 20) {
offset += gameDay === 5 ? 3 : // Friday after 20:00
1; // any other day
}
gameDate.setDate(gameDate.getDate() + offset);
let gameDay = gameDate.getDay();
offset = 0;
if (gameDay === 0) offset += 1; // Sunday
else if (gameDay === 2 || gameDay === 4) offset += 1; // Tuesday or Thursday
else if (gameDay === 6) offset += 2; // Saturday
gameDate.setDate(gameDate.getDate() + offset);
gameDate.setHours(20, 0, 0);
return gameDate.getTime();
}
const gameCountdown = setInterval(function() {
var gameDay;
var currentDateTime = new Date();
var currentDay = currentDateTime.getDay();
var currentTime = currentDateTime.getTime();
var countdownTime = getGameTime(currentTime);
var difference = parseInt((countdownTime - currentTime));
var hours = Math.floor((difference / (1000 * 60 * 60)));
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
}, 1000);
<span id="hours"></span>
<span id="min"></span>
<span id="sec"></span>

Setting a countdown that does something in the end

I'm trying to set a countdown that will do something before and after,
I'm using the code from this site: https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
I have this code, but I don't know how to:
set the end time;
do something before and after the timer is done;
schedule the clock automatically.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
//var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
var schedule = [
['May 10 2020', 'May 10 2020']
];
//initializeClock('clockdiv', deadline);
// iterate over each element in the schedule
for(var i=0; i<schedule.length; i++){
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if(endMs > currentMs && currentMs >= startMs ){
initializeClock('clockdiv', endDate);
}
}
Could you please advise me?

jQuery/Javascript Calculate Difference beetween two dates in months, weeks, days, hours, minutes and seconds

I want to calculate the difference beetween two dates in Javascript in months, weeks, days, hours, minutes and seconds.
Problem:
Weeks and days aren't calculated properly.
I already tried to change .get...() into .getUTC...() but the difference was calculated wrong either.
var date = new Date("{% if holiday.is_now %}{{ holiday.end_date.isoformat }}{% else %}{{ holiday.end_date.isoformat }}{% endif %}");
function calcDate(a, b) {
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDay(), a.getHours(), a.getMinutes(), a.getSeconds());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDay(), b.getHours(), b.getMinutes(), b.getSeconds());
return (utc2 - utc1) / 1000;
}
function convertDate(seconds){
var sec = Math.floor(seconds % 60);
var min = Math.floor(seconds / 60 % 60);
var hour = Math.floor(seconds / 60 / 60 % 24);
var diff = seconds / 60 / 60 / 24;
var months = Math.floor(diff / 30);
var weeks = Math.floor(diff / 7 % (30 / 7));
var days = Math.floor(diff % 7);
console.log(days);
return [months, weeks, days, hour, min, sec]
}
function add_countdown(sec){
$.each(convertDate(sec), function(i, element){
var selected = $("footer .countdown .counter#_counter_date_" + i);
selected.find("h1").text(element);
singular_pluralize(selected.find("p"), element);
})
}
function singular_pluralize(element, integer){
integer > 1 || integer == 0 ? element.text(element.attr("data-word-plural")) : element.text(element.attr("data-word-singular"));
}
var interval;
$("footer table td.a").on("click mouseup", function(){
clearInterval(interval);
date = new Date($(this).attr("data-date"));
$("footer #_foter_big_countdown_to_what").text("zu den " + $(this).attr("data-name").replace(/ /g, ''));
set_interval();
})
function set_interval(){
add_countdown(calcDate(new Date(), date));
interval = window.setInterval(function(){
var calc = calcDate(new Date(), date);
if (calc == 0)
holiday_begin();
else
add_countdown(calc);
}, 900);
}
function holiday_begin(){
$("footer .counter, footer .part#_footer_select_holiday").remove();
$("footer .darken h1._footer_big_countdown").html("Fröhliche Ferien!");
}
set_interval();
EDIT:
I found the solution. I had to use Math.round and I had to change a little bit:
function convertDate(seconds){
var sec = Math.round(seconds % 60);
var min = Math.round(seconds / 60 % 60);
var hour = Math.round(seconds / 60 / 60 % 24);
var diff = seconds / 60 / 60 / 24;
var months = Math.round(diff / 30);
var days = Math.round(diff % 30);
var weeks = Math.round(months / 4.3);
return [months, weeks, days, hour, min, sec]
}

get date/time off server not local machine

I've got this code to show a countdown message between Monday - Wednesday until Wednesday noon, then it disappears.
This is the code:
<script>
var today = new Date(),
curDay = today.getDay();
var deadline = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate() + 3 - curDay, 10, 59, 59));
function time_remaining(endtime){
var t = endtime - new Date();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {'total':t, 'days': days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}
function run_clock(id,endtime){
var clock = document.getElementById(id);
if (null === clock) {
return;
}
var days_span = clock.querySelector('.days');
var hours_span = clock.querySelector('.hours');
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
function update_clock(){
var t = time_remaining(endtime);
days_span.innerHTML = ('0' + t.days).slice(-2);
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
day = today.getDay();
if((t.total<=0) || (day === 0) || (day === 6) || (day === 5) || (day === 4)){
clearInterval(timeinterval);
document.getElementById('deadline_Container').style.display = "none";
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
if (curDay > 0 && today < deadline) {
run_clock('clockdiv', deadline);
}
</script>
Now this works fine, however if somebody is in a different time zone for example the timings of the countdown won't be right. So I was wondering if there is any way to run this off the server time rather than the local time of the machine the user is using?

Text after javascript timer finishes isn't removed when the new text arrives

https://jsfiddle.net/zLfuwdtu/1/
I have a script that counts down a set date 'Date1'. While it counts down it displays a message "UNTIL FLOW". When that timer finishes it starts another timer 'Date2' in its place and displays "ON FLOW".
The problem:
When 'Date1' finishes the countdown, it continues to display the message from 'Date1' (UNTIL FLOW) alongside the 'Date2' message (ON FLOW). I need it to not display the message from 'Date1' when displaying the message from 'Date2'.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime, secondend, newfirstend) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.flowDays');
var hoursSpan = clock.querySelector('.flowHours');
var minutesSpan = clock.querySelector('.flowMinutes');
var secondsSpan = clock.querySelector('.flowSeconds');
function updateClock() {
var t = getTimeRemaining(endtime);
if(t.seconds<0)
{
clearInterval(timeinterval);
}
else
{
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
if (t.total <= 0) {
document.getElementById("flowWindow").textContent= 'ON FLOW! ';
endtime=secondend;
}
else
{document.getElementById("flow2Window").textContent= 'UNTIL FLOW';}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var firstend = 'Sun Jul 05 2016 03:38:40 GMT-0400 (EDT)';
var secondend = 'Sun Jul 08 2016 20:52:10 GMT-0400 (EDT)';
initializeClock('flowClockdiv', firstend, secondend, firstend);

function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, flow) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.flowDays');
var hoursSpan = clock.querySelector('.flowHours');
var minutesSpan = clock.querySelector('.flowMinutes');
var secondsSpan = clock.querySelector('.flowSeconds');
function updateBoard(flow) {
document.getElementById("flowWindow").textContent = '';
document.getElementById("flow2Window").textContent = '';
switch(flow[current].name)
{
case 'on':
document.getElementById("flowWindow").textContent = 'ON FLOW! ';
break;
case 'until':
document.getElementById("flow2Window").textContent = 'UNTIL FLOW';
break;
}
}
function updateClock() {
var t = getTimeRemaining(flow[current].end);
if (t.seconds >= 0) {
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
if (t.total <= 0) {
flow.shift();
updateBoard(flow);
if (flow[current].name == 'stop') {
clearInterval(timer);
}
}
}
updateBoard(flow);
var timer = setInterval(updateClock, 1000);
}
var current = 0;
var firstend = new Date();
var secondend = new Date();
firstend.setSeconds(firstend.getSeconds() + 5);
secondend.setSeconds(secondend.getSeconds() + 10);
var flow = [
{ 'name': 'until', 'end': firstend },
{ 'name': 'on', 'end': secondend },
{ 'name': 'stop', 'end': null }
];
initializeClock('flowClockdiv', flow);