Weekly Repeating Countdown Timer with Javascript

While in most instances a regular one-time countdown timer will be all you need, I wanted to go over how to make the more complicated repeating countdown timer. This can be very useful in certain situations as I recently found out when I needed to make a countdown timer for a blog. The blog had a weekly newsletter and we wanted the countdown timer to count down the time until the next newsletter was going to be sent out each week. Instead of having to change the date that the timer was counting to each week, I wanted to automate it to repeat on a weekly basis without the need for updates.

Repeating Countdown Timer Javascript

This code only needs to be adjusted to the time and day of the week that you want the countdown to count towards. In this demo I have it set to countdown to 8pm on Saturday night. You would need to change the “dy” variable to a number from 0 to 6. 0 is for Sunday and 6 is for Saturday with all the other days correlating the numbers in between. The hour that it counts down to is using military time so it works on the 24 hour scale. So for 8am you would use 8, but for 8pm you would use 20. You change that number from within the “countertime” variable, where you see the number 20 in the example code below.

<script>
var curday;
var secTime;
var ticker;
 
function getSeconds() {
 var nowDate = new Date();
 var dy = 6 ; //Sunday through Saturday, 0 to 6
 var countertime = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),20,0,0); //20 out of 24 hours = 8pm
 
 var curtime = nowDate.getTime(); //current time
 var atime = countertime.getTime(); //countdown time
 var diff = parseInt((atime - curtime)/1000);
 if (diff > 0) { curday = dy - nowDate.getDay() }
 else { curday = dy - nowDate.getDay() -1 } //after countdown time
 if (curday < 0) { curday += 7; } //already after countdown time, switch to next week
 if (diff <= 0) { diff += (86400 * 7) }
 startTimer (diff);
}
 
function startTimer(secs) {
 secTime = parseInt(secs);
 ticker = setInterval("tick()",1000);
 tick(); //initial count display
}
 
function tick() {
 var secs = secTime;
 if (secs>0) {
  secTime--;
 }
 else {
  clearInterval(ticker);
  getSeconds(); //start over
 }
 
 var days = Math.floor(secs/86400);
 secs %= 86400;
 var hours= Math.floor(secs/3600);
 secs %= 3600;
 var mins = Math.floor(secs/60);
 secs %= 60;
 
 //update the time display
 document.getElementById("days").innerHTML = curday;
 document.getElementById("hours").innerHTML = ((hours < 10 ) ? "0" : "" ) + hours;
 document.getElementById("minutes").innerHTML = ( (mins < 10) ? "0" : "" ) + mins;
 document.getElementById("seconds").innerHTML = ( (secs < 10) ? "0" : "" ) + secs;
}
</script>

You’ll need to call the getSeconds() function we created in here to start off the timer, but we don’t want to have it begin until the DOM is ready. We can do this is a couple different ways. The code is all currently using standard javascript, so if you want to keep it as plain javascript you could add the function call to the body with onload:

If you have jQuery loaded already, you could also use the document.ready function:

<script>
$( document ).ready(function() {
  getSeconds();
});
</script>

Timer Display HTML

This is the basic setup I am using to output the clock numbers. Each div has either CSS or javascript attached to it, so if you intend to make any changes just make sure you update all the code as needed to match.

<div id="countholder">
 <div><span class="days" id="days"></span><div class="smalltext">Days</div></div>
 <div><span class="hours" id="hours"></span><div class="smalltext">Hours</div></div>
 <div><span class="minutes" id="minutes"></span><div class="smalltext">Minutes</div></div>
 <div><span class="seconds" id="seconds"></span><div class="smalltext">Seconds</div></div>
</div>

Countdown Timer Styles

Here is the CSS I used in the demo you’ll see below. Feel free to modify it to your liking.

<style>
#countholder .link{
  margin-top: 40px;
}
 
#countholder a{
  display: inline-block;
  color: #fff;
  font-size: 20px;
  padding: 20px;
  background: #265;
  border-radius: 10px;
  text-decoration: none;
}
 
#countholder a:hover{
  background: #487;
}
 
#countholder{
 font-family: sans-serif;
 color: #fff;
 display: inline-block;
 font-weight: 100;
 text-align: center;
 font-size: 48px;
 background-color: #333;
 padding:20px;
 border-radius: 6px;
 margin-bottom:30px;
 line-height: 1.4;
}
 
 
#countholder > div{
 padding: 4px 10px;
 border-radius: 3px;
 background: #cc3300;
 display: inline-block;
}
 
#countholder div > span{
 border-radius: 3px;
 background: #cc3300;
 display: inline-block;
}
 
#countholder .smalltext{
 padding-top: 5px;
 font-size: 16px;
}
</style>

Repeating Countdown Timer Demo

This demo is repeatedly counting down to 8pm Saturday night:

There you have it, a weekly repeating countdown timer in javascript that you can easily use on your own site!