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.

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:

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.

Countdown Timer Styles

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

Repeating Countdown Timer Demo

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

Days
Hours
Minutes
Seconds

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

Comments

  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!!!!!

Speak Your Mind

*