Alternating Repeating Countdown - html - javascript

Question

Obviously this question has multiple parts : one to get a countdown and one to alternate which to display. I want a countdown to the weekend (Saturday 00:00) and on the weekend it will display a countdown to the end of the weekend (Monday 00:00)

So first the countdown : the way I can see is to go on a countdown site, and use and then it will be there, the only problem is this wouldn't fit with the background and you'd have to scroll. So you must use another method.

Secondly the alternation : I don't have many ideas for this but I have to think of something or this is off topic. So if I want this to change twice. I could make the countdown a variable (x) and then you would test if x is 0 then add one to y and when it is an odd number, display the 5 day countdown (432000 seconds) then when it is an even number then display the 2 day countdown (172800 seconds) So here is my (probably failed) attempt :

    if x=0 {
        if y=1 {
           var z=432000
        }
        else {
           var z=172000
        }
    }

I do not know if this is right but I hope you appreciate my attempt. Thank you in advance!

Answer 1

So if you're trying to write a little web app that does what you ask, then really it doesn't require you to use a third party timer. What you really want is the Date object. You can then use this to detect the current time and day of the week, and use that to figure out a) which timer you want, and b) how long until the timer ends.

var now = new Date;
var day = now.getDay(); // this returns a number from 0-6, where 0 is Sunday, going through the days of the week.
var month = now.getMonth();
var date = now.getDate();
var year = now.getFullYear();
var target_time; // this will be used to store the time at which the timer elapses
var day_offset; // this stores the number of days we need to offset by until we get to the end of the timer
if(day === 0 || day === 6){
    // it's the weekend!
    day_offset = (day === 0) ? 1 : 2;
    target_time = new Date(year, month, date+day_offset, 0, 0, 0);
} else {
    // it's a week day!
    day_offset = 6-day; // i think this will work!
    target_time = new Date(year, month, date+day_offset, 0, 0, 0);
}
var milliseconds_until_end = target_time.getTime() - Date.now();
// milliseconds_until_end is the number of milliseconds until the timer should end. 
// you can parse this in all sorts of ways, but for starters, you could do something 
// like this:
var seconds = Math.floor(milliseconds_until_end/1000);
var minutes = seconds/60;
var hours = minutes/60;
var extra_minutes = 60 * (hours - Math.floor(hours));
var extra_seconds = 60 * (extra_minutes - Math.floor(extra_minutes));
hours = Math.floor(hours);
extra_minutes = Math.floor(extra_minutes);
extra_seconds = Math.floor(extra_seconds);
// presumably we want to write all this somewhere!
var output = document.getElementById("output");
output.textContent = hours + ":" + extra_minutes + ":" + extra_seconds;

Just a word of warning, I haven't tested any of this. All you need to do now is put all this code in a setInterval. To do that, you first have to wrap all of the above code in a function definition (which we can call the getTime function).

setInterval(getTime, 1); // this makes the getTime function trigger once every millisecond (not second as i had previously! my bad).