javascript - Countdown Clock Synchronized With Time of Day

Question

For a new website I'm trying to make a timer count down from 00:15:00 to 00:00:00 in sync with the time of day on the hour, 1/4 hour, half past hour, 3/4 hour 24 hours a day.

For example, if someone goes to the site at 5:02 the timer should be at 00:13:00. If they leave then come back at 5:10 the timer should be at 00:05:00 and so on until it hits zero and then stays at zero until they refresh or come back later.

So far the code I have counts down from 00:15:00 to zero but I can't seem to get it in sync with the actual time of day. Also, whenever I refresh the page the timer changes it's time.

Any help is much appreciated!

Here's the code I have so far:

var date = new Date();
const date1 = new Date('February 4, 2021, 14:00:00 GMT-06:00');
// sets base of even 15 min intervals on xx:00, xx:15, xx:30, xx:45
var hourOne = date.getHours();
var hourTwo = date1.getHours();
var minOne = date.getMinutes();
var minTwo = date1.getMinutes();
let secondsOne = date.getSeconds();
let secondsTwo = date1.getSeconds();
let hours = (Math.abs(hourTwo - hourOne));
let mins = (60-Math.abs(minOne - minTwo));
let secs = (60-Math.abs(secondsTwo - secondsOne));
let time = (86400 -(3600*hours -60*mins+60- secs))%900; //900 denotes 15 min in sec
var clock = $('.clock').FlipClock(time, {
    countdown: true
});

#clock1 {
    display: inline-block;
width: auto;
  
}
.container {
    text-align: center;
}
@media only screen and (max-width: 600px) {
  #clock1 {
  transform: scale(0.5)
  }
}

<br>
<link href="https://api.chipware.co.za/css/flipclock.css"rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api.chipware.co.za/js/flipclock-min.js"></script>
<div class="container">
<div class="clock" id="clock1"></div>
</div>

question from:https://stackoverflow.com/questions/66058434/countdown-clock-synchronized-with-time-of-day

Answer 1

Have a look at the JS below and paste it on your side. Let me know if it works.

const date = new Date();
var minutesNow= date.getMinutes();
var remainder = minutesNow%15;
var minutesLeft  = 15-remainder;
var secondsNow = date.getSeconds();


let time = (86400 -(3600*24 - 60*minutesLeft + secondsNow)); 
var clock = $('.clock').FlipClock(time, {
    countdown: true
});