I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to suit my needs. Is there something missing or incorrectly formatted in the code that could be causing the countdown to not update in real-time?
function updateTimeSpan() {
var theSpan = document.getElementById('timeLeft');
var d = new Date();
var t = new Date();
var ms;
var s, m, h;
// if it's after 5pm, set today to tomorrow
if (d.getHours() > 16) {
d.setDate(d.getDate() + 1);
}
// get the next monday
while (d.getDay() != 1) {
d.setDate(d.getDate() + 1);
}
// set the time
d.setHours(1665);
d.setMinutes(33);
d.setSeconds(27);
// get the difference between right now and next monday
ms = d - t;
// get the days between now and then
d = parseInt(ms / (1000 * 60 * 60 * 24));
ms -= (d * 1000 * 60 * 60 * 24);
// get hours
h = parseInt(ms / (1000 * 60 * 60));
ms -= (h * 1000 * 60 * 60);
// get minutes
m = parseInt(ms / (1000 * 60));
ms -= (m * 1000 * 60);
// get seconds
s = parseInt(ms / 1000);
theSpan.innerHTML = d + ' DAYS | ' + h + ' HRS | ' + m + ' MINS | ' + s + ' SECS';
setTimeout('updateTimeSpan()', 100);
}
onload = updateTimeSpan();
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});.timer-header {
position: absolute;
left: 0;
width: 100%;
}
.timer-header span {
color: black;
font: bold 24px/45px Montserrat, Sans-Serif;
letter-spacing: -1px;
font-size: 30px;
padding: 10px;
}
.timer-header span.spacer {
padding: 0 5px;
}
@media only screen and (max-width: 480px) {
.timer-header span {
color: black;
font: bold 24px/45px Montserrat, Sans-Serif;
font-size: 18px;
padding: 5px;
}
.timer-header span.spacer {
padding: 0 5px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h2 class="timer-header"><span id="timeLeft"></span></h2>
</body>