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.

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) {
 else {
  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;

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:

$( document ).ready(function() {

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>

Countdown Timer Styles

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

#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;
 font-family: sans-serif;
 color: #fff;
 display: inline-block;
 font-weight: 100;
 text-align: center;
 font-size: 48px;
 background-color: #333;
 border-radius: 6px;
 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;

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!


  1. Great and simple solution, thanks!

  2. Thanks a lot…!!! thankful for understandable java script

  3. Great code! I have a question. How do you set it to a specific timezone? Iโ€™m running a gaming community and I wish to use this clock to warn about the end of a event at 23:59 pm gmt. As it is, users from different timezones will not get the same time. Thank you.

    • Thanks, and great question! You would have to work off of Universal Time (UTC), which javascript does offer options for. You will just need to adjust the UTC ending time to match whatever ending time you want in your specific desired timezone.
      So for example:
      var countertime = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),20,0,0);
      would turn into:
      var countertime = new Date(Date.UTC(nowDate.getUTCFullYear(),nowDate.getUTCMonth(), nowDate.getUTCDate(), 20, 0, 0));

      Here the value of 20 would be 8PM UTC, but you would then adjust that value to end at 8PM in your time zone. This way everyone’s timer would end at 8PM your time.

      Now just replace all regular time instances with UTC based time within the code and everyone should then be following a clock that ends at the exact same time globally.

  4. Thank you so much!!! for this logic….had been dealing with manual resets till i stumbled upon this….nice work!!!!!

  5. Very useful script, working towards modifying this to work with events, time-zones and toggles. Thank you very much for providing a good base foundation to work from. ๐Ÿ™‚

Speak Your Mind