Website Countdown Js

Hi I am having a hard time making this countdown work for me. I am trying to make it count down to every sunday at 11:15am since that is when our church service starts. Can anyone

Solution 1:

I answered a similar question about a week or so ago. I have a really simple countdown function already written. The trick is to modify it to get the next Sunday @ 11:15 am, which I've written a function for.

var getNextSunday = function () {
    var today = newDate(),
        day = today.getDay(),	// 1 for Mon, 2 for Tue, 3 for Wed, etc.
        delta = 7 - day;

    var sunday = newDate(today.getTime() + (delta * 24 * 3600 * 1000));

    sunday.setHours(11);
    sunday.setMinutes(15);
    sunday.setSeconds(0);

    return sunday;
}

var t = getNextSunday(),
    p = document.getElementById("time"),
    timer;
var u = function () {
    var delta = t - newDate(),
        d = delta / (24 * 3600 * 1000) | 0,
        h = (delta %= 24 * 3600 * 1000) / (3600 * 1000) | 0,
        m = (delta %= 3600 * 1000) / (60 * 1000) | 0,
        s = (delta %= 60 * 1000) / 1000 | 0;
    
    if (delta < 0) {
        clearInterval(timer);
        p.innerHTML = "timer's finished!";
    } else {
        p.innerHTML = d + "d " + h + "h " + m + "m " + s + "s";
    }
}
timer = setInterval(u, 1000);

<h1id="time"></h1>

This should be easy enough to adapt to fit your website's needs. The only tricky part might be my use of

h=(delta%=24*3600*1000)/(3600*1000)|0

delta %= ... returns delta, after performing the %=. This was just to save characters. If you don't like this, you can just separate the delta %= ... part:

delta%=24*3600*1000;h=delta/(3600*1000)|0;//...dothesamefortherest

Solution 2:

This object uses a few semi-advanced javascript ideas (closures and * IIFE*) so hopefully it is easy-ish to understand. If you have any questions feel free to leave a comment.

var churchtime = (function (){
    // Total seconds passed in the week by sunday 11:15amvar magic_number = 558900;
    var now;
    var rawtime = function (){
          //updates now with the current date and time
          now = newDate()
          //Converts now into pure seconds  return (((((((now.getDay()-1)*24)+now.getHours())*60)+now.getMinutes())*60)+now.getSeconds());
    };

    //closurereturn {

        raw_countdown : function (){
            returnMath.abs(rawtime()-magic_number);
        },

        countdown : function(){      
            var time = Math.abs(rawtime()-magic_number)  
            var seconds = time % 60, time = (time - seconds)/60; 
            var minutes = time % 60, time = (time - minutes)/60; 
            var hours = time % 24, time = (time - hours)/24;
            var days = time;
            return [days,hours,minutes,seconds];
        }
    }

})(558900); //<- Total seconds passed in the week by sunday 11:15am


churchtime.raw_countdown()// returns the raw number of seconds until church 

churchtime.countdown() // returns an array of time until church [days,hours,minutes,seconds]

Once you have an object like churchtime, it should be super easy to implement.

For example:

var churchtime = (function(magic_number) {
  var now;
  var rawtime = function() {
    //updates now with the current date and time
    now = newDate()
      //Converts now into pure seconds  return (((((((now.getDay() - 1) * 24) + now.getHours()) * 60) + now.getMinutes()) * 60) + now.getSeconds());
  };

  //closurereturn {

    raw_countdown: function() {
      returnMath.abs(rawtime() - magic_number);
    },

    countdown: function() {
      var time = Math.abs(rawtime() - magic_number)
      var seconds = time % 60,
        time = (time - seconds) / 60;
      var minutes = time % 60,
        time = (time - minutes) / 60;
      var hours = time % 24,
        time = (time - hours) / 24;
      var days = time;
      return [days, hours, minutes, seconds];
    }
  }

})(); //<- IIFEAutoUpdate = functionAutoUpdate() {
  var time = churchtime.countdown();
  document.getElementById("day").innerHTML = time[0];
  document.getElementById("hour").innerHTML = time[1];
  document.getElementById("min").innerHTML = time[2];
  document.getElementById("sec").innerHTML = time[3];
  setTimeout(AutoUpdate, 900); //Calls it's self again after .9 seconds
}(); //<- IIFE

<h1>Day:<spanid="day"></span> Hour:<spanid="hour"></span>
Minute:<spanid="min"></span> second: <spanid="sec"></span></h1>