I have to count down the system clock according to two different times. in hours, minutes, seconds. For example, a day is 24 hours.
Between 15:00:00 and 13:00:00 = 22 hours. When the clock is 15:00:00, it should count back from 22:00:00. and it must be 00:00:00 at 13:00:00.
Between 13:00:00 and 15:00:00 = 2 hours. When the clock is 13:00:00, it should count back from 2:00:00. and it must be 00:00:00 at 15:00:00.
I've tried so hard for a few days, but I couldn't. please help me.
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery-3.4.1.js"></script> </head> <body> <script type="text/javascript"> var timer = setInterval(function() { var now= new Date().getTime(); var endtime= new Date(13); var t = now - endtime; var endtime2= new Date(15); var y = now - endtime2; if (t <= 21) { let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) + "<span class='label'> hr</span>"; document.getElementById("timer-minutes").innerHTML= ("0" + minutes).slice(-2) + "<span class='label'> mn</span>"; document.getElementById("timer-seconds").innerHTML= ("0" + seconds).slice(-2) + "<span class='label'> sc</span>"; } if (y >=22) { let hours = Math.floor((y % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((y % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((y % (1000 * 60)) / 1000); document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) + "<span class='label'> hr</span>"; document.getElementById("timer-minutes").innerHTML= ("0" + minutes).slice(-2) + "<span class='label'> mn</span>"; document.getElementById("timer-seconds").innerHTML= ("0" + seconds).slice(-2) + "<span class='label'> sc</span>"; } else { document.getElementById("timer").innerHTML = "There is a problem!"; } }, 1000); </script> <div class="container"> <p id="timer"> <span id="timer-hours"></span> <span id="timer-minutes"></span> <span id="timer-seconds"></span> </p> </div> </body> </html>