[Block] Recurring count down timer UTC

[Final60]

The following is a recurring count down timer. It will count down to a specific day and/or hour, minute, second and repeat the countdown continuously. 


Please add the following into a Script block

Code Select Expand



<div id="counter">Loading...</div>
<script type="text/javascript">
     function myCounter(o, timeArray){
         var counter = document.getElementById(o);
         if(!counter) {
             return;
         }

         // helper functions
         function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
         function toTimeString(sec, showZero){
             var d=Math.floor(sec/(60*60*24))
             var h=Math.floor(sec/(60*60)%24);
             var m=Math.floor((sec/60) % 60);
             var s=sec % 60;
             var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
             if(showZero){
                return ret;
             }else if(d==0 && h==0 && m==0){
                return s+'sec';
             }else if(d==0){
                return h+'hrs '+m+'min '+s+'sec';
             }else if(d==0 && h==0){
                return m+'min '+s+'sec';
             }else {
                return ret;
             }
         }
         //
         var secArray = [];
         var dayNow = new Date().getDay();
         for(var i=0;i<timeArray.length;i++){
            var day=timeArray[i][0];
            if(day==-1){
                day=dayNow;
            }
             secArray.push({
                day: timeArray[i][0],
                sec: mksec(day, timeArray[i][1], timeArray[i][2], timeArray[i][3]),
                msg: timeArray[i][4] || false,
                showZero: timeArray[i][5] || false
             });
         }
         secArray.sort(function(a,b){ return a.sec-b.sec;});

         // timer code - will be called around each second (~1000 ms)
         function updateCounter(){
             // get current UTC time in seconds
             var d=new Date();
             var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
             // find next event
             var nextIndex=0;
             for(var i=0;i<secArray.length; i++){
                 var diff = secArray[i].sec-secNow;
                 if(diff>0){
                     nextIndex=i;
                     break;
                 }
             }
             //
             var diff=secArray[nextIndex].sec-secNow;
             var prevDiff=diff;
             if(diff<0){
                var dayDiff = 6-secArray[nextIndex].day;
                if(secArray[nextIndex].day == -1){
                    dayDiff=0;
                }
                diff=(dayDiff+1)*24*60*60-Math.abs(diff);
             }
             var str='';
             // get message if there is any set
             if(secArray[nextIndex].msg){
                 str=secArray[nextIndex].msg;
             }
             var timeString = toTimeString(diff, secArray[nextIndex].showZero);
             if(str.match('@{counter}')!=null){
                 str=str.replace(/@{counter}/, timeString);
             }else if(str.indexOf(' ')==0){ // message starts with space
                 str=timeString+str;
             }else{ // no specific hint where to put counter, so display it after message
                 str+=timeString;
             }
             counter.innerHTML=str;
        }
     
         setInterval(updateCounter, 1000);
         
     };
myCounter('counter', [ [2, 20, 0, 0, '<b>Event is in<b> @{counter}', false] ]);
</script>




To set the date and time find

Code Select Expand



myCounter('counter', [ [2, 20, 0, 0, '<b>Event is in<b> @{counter}', false] ]);



The format is Day,hour,minute,second in 24 hours time.
Sunday =0
Monday=1
Tuesday=2
Wednesday=3
Thursday=4
Friday=5
Saturday=6
Daily countdown = -1

To have multiple count down timers in the same block add another

Code Select Expand



<div id="counter">Loading...</div>

at the top and rename it to "counter2" etc and add another

Code Select Expand



myCounter('counter', [ [2, 20, 0, 0, '<b>event is in</b> @{counter}', false] ]);


at the bottom and rename it to "counter2" etc.

Example of way to add text with timer

Code Select Expand



myCounter('counter', [
  [16,0,0, 'There is @{counter} left for event one'],
  [16,0,10, 'Second event starts in '],
  [16,0,20, ' for third event', false]
]);



Enjoy

[Dianna]

Hey, this is really cool!  Where do I put in the time that I want it to countdown too?  I want it to countdown to 10:00pm Pacific Standard Time.

ETA:  Oh duh, on the 16,0,0. Is that right? 

So mine would be 10,0,0? 

I'm thinking out loud that I would have to use the 2nd and 3rd counters for other time zones.

Very cool!  Thanks!

[ZarPrime]

Final60,

I know it might be a different script, but do you know off the top of your head what I would change to have a repeating countdown that goes off once per week instead of once per day.

For instance, let's say I wanted the timer to countdown to Friday morning at 6 AM every week instead of just 6AM every day.

ZarPrime

[Final60]

Hey, this is really cool!  Where do I put in the time that I want it to countdown too?  I want it to countdown to 10:00pm Pacific Standard Time.

ETA:  Oh duh, on the 16,0,0. Is that right? 

So mine would be 10,0,0? 

I'm thinking out loud that I would have to use the 2nd and 3rd counters for other time zones.

Very cool!  Thanks!

This script is set for UTC which is GMT+0 so for yor example you would use the following;

Code Select Expand


myCounter('counter', [
  [06,0,0, 'event starts in '],
]);


If I've worked it out right PST is GMT-8.
So for you to get the counter to count down to 10pm (PST) daily you have it set to 06(am gmt+0),0(mins),0(secs). Its possible to use timeoffset, but in both cases you need to know how many hours to offset and change the code accordingly, so this may be the simpler option.

[Final60]

Final60,

I know it might be a different script, but do you know off the top of your head what I would change to have a repeating countdown that goes off once per week instead of once per day.

For instance, let's say I wanted the timer to countdown to Friday morning at 6 AM every week instead of just 6AM every day.

ZarPrime

For a weekly timer this should work, I havent tested it yet though

Code Select Expand


<script type="text/javascript">
     function myCounter(o, timeArray){
         var counter = document.getElementById(o);
         if(!counter) {
             return;
         }

         // helper functions
         function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
         function toTimeString(sec, showZero){
             var d=Math.floor(sec/(60*60*24))
             var h=Math.floor(sec/(60*60)%24);
             var m=Math.floor((sec/60) % 60);
             var s=sec % 60;
             var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
             if(showZero){
                return ret;
             }else if(d==0 && h==0 && m==0){
                return s+'sec';
             }else if(d==0){
                return h+'hrs '+m+'min '+s+'sec';
             }else if(d==0 && h==0){
                return m+'min '+s+'sec';
             }else {
                return ret;
             }
         }
         //
         var secArray = [];
         var dayNow = new Date().getDay();
         for(var i=0;i<timeArray.length;i++){
            var day=timeArray[i][0];
            if(day==-1){
                day=dayNow;
            }
             secArray.push({
                day: timeArray[i][0],
                sec: mksec(day, timeArray[i][1], timeArray[i][2], timeArray[i][3]),
                msg: timeArray[i][4] || false,
                showZero: timeArray[i][5] || false
             });
         }
         secArray.sort(function(a,b){ return a.sec-b.sec;});

         // timer code - will be called around each second (~1000 ms)
         function updateCounter(){
             // get current UTC time in seconds
             var d=new Date();
             var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
             // find next event
             var nextIndex=0;
             for(var i=0;i<secArray.length; i++){
                 var diff = secArray[i].sec-secNow;
                 if(diff>0){
                     nextIndex=i;
                     break;
                 }
             }
             //
             var diff=secArray[nextIndex].sec-secNow;
             var prevDiff=diff;
             if(diff<0){
                var dayDiff = 6-secArray[nextIndex].day;
                if(secArray[nextIndex].day == -1){
                    dayDiff=0;
                }
                diff=(dayDiff+1)*24*60*60-Math.abs(diff);
             }
             var str='';
             // get message if there is any set
             if(secArray[nextIndex].msg){
                 str=secArray[nextIndex].msg;
             }
             var timeString = toTimeString(diff, secArray[nextIndex].showZero);
             if(str.match('@{counter}')!=null){
                 str=str.replace(/@{counter}/, timeString);
             }else if(str.indexOf(' ')==0){ // message starts with space
                 str=timeString+str;
             }else{ // no specific hint where to put counter, so display it after message
                 str+=timeString;
             }
             counter.innerHTML=str;
        }
     
         setInterval(updateCounter, 1000);
         
     };
myCounter('counter', [ [DayOfWeek, hour, min, sec, 'Counter @{counter}', false] ]);
</script>




[ZarPrime]

Hi Final60,

First of all, thanks for the code.  However, there is something wrong with the weekly code, but I'm not sure what it is.  Here's what's happening ...

1.  When I have a block with the Weekly Countdown in it, and the parameters set to ...

Code Select Expand

myCounter('counter', [ [5, 6, 0, 0, 'Next Turns are Due in @{counter}', false] ]);
... The weekly block doesn't work.  See "Turn Countdown Test" Block in pic 1.

2.  When I have a block with the 24 Hour Countdown in it, and the parameters set to ...

Code Select Expand

myCounter('counter', [
  [6,0,0, 'There is @{counter} left for event one'],
  [6,0,10, 'Second event starts in '],
  [6,0,20, ' for third event', false]
... the block works perfectly for the 24 countdown.  See "Countdown Test" Block in pic 2.

*** Now here's the strange part ***

3.  When I have both blocks turned on, the "Turn Countdown Test" Block still doesn't work but now the "Countdown Test" Block works the way I want the "Turn Countdown Test" Block to work.  In other words, the 24 hour block picks up and displays the countdown the way the weekly block should be.  See both Blocks in pic 3.

For some reason, I can't seem to put my brain around this and figure out what is happenng here.  I just want the weekly countdown, not the 24 hour one.

Any Clues?

ZarPrime

[Final60]

this seem to work.

DayOfWeek would be -1 for 24h interval counter and for weekly counters 0=Sunday, 1=Monday,... 6=Saturday
myCounter('counter', [ [DayOfWeek, hour, min, sec, 'Counter @{counter}', false] ]);

make sure if you have both counters running at the same time that they don't have the same ID, counter, counter1, counter2, counter3 etc.

For example this full code

Code Select Expand



<div id="counter3">Loading...</div>
<script type="text/javascript">
     function myCounter(o, timeArray){
         var counter = document.getElementById(o);
         if(!counter) {
             return;
         }

         // helper functions
         function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
         function toTimeString(sec, showZero){
             var d=Math.floor(sec/(60*60*24))
             var h=Math.floor(sec/(60*60)%24);
             var m=Math.floor((sec/60) % 60);
             var s=sec % 60;
             var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
             if(showZero){
                return ret;
             }else if(d==0 && h==0 && m==0){
                return s+'sec';
             }else if(d==0){
                return h+'hrs '+m+'min '+s+'sec';
             }else if(d==0 && h==0){
                return m+'min '+s+'sec';
             }else {
                return ret;
             }
         }
         //
         var secArray = [];
         var dayNow = new Date().getDay();
         for(var i=0;i<timeArray.length;i++){
            var day=timeArray[i][0];
            if(day==-1){
                day=dayNow;
            }
             secArray.push({
                day: timeArray[i][0],
                sec: mksec(day, timeArray[i][1], timeArray[i][2], timeArray[i][3]),
                msg: timeArray[i][4] || false,
                showZero: timeArray[i][5] || false
             });
         }
         secArray.sort(function(a,b){ return a.sec-b.sec;});

         // timer code - will be called around each second (~1000 ms)
         function updateCounter(){
             // get current UTC time in seconds
             var d=new Date();
             var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
             // find next event
             var nextIndex=0;
             for(var i=0;i<secArray.length; i++){
                 var diff = secArray[i].sec-secNow;
                 if(diff>0){
                     nextIndex=i;
                     break;
                 }
             }
             //
             var diff=secArray[nextIndex].sec-secNow;
             var prevDiff=diff;
             if(diff<0){
                var dayDiff = 6-secArray[nextIndex].day;
                if(secArray[nextIndex].day == -1){
                    dayDiff=0;
                }
                diff=(dayDiff+1)*24*60*60-Math.abs(diff);
             }
             var str='';
             // get message if there is any set
             if(secArray[nextIndex].msg){
                 str=secArray[nextIndex].msg;
             }
             var timeString = toTimeString(diff, secArray[nextIndex].showZero);
             if(str.match('@{counter}')!=null){
                 str=str.replace(/@{counter}/, timeString);
             }else if(str.indexOf(' ')==0){ // message starts with space
                 str=timeString+str;
             }else{ // no specific hint where to put counter, so display it after message
                 str+=timeString;
             }
             counter.innerHTML=str;
        }
     
         setInterval(updateCounter, 1000);
         
     };
myCounter('counter3', [ [6, 0, 0, 0, 'Counter @{counter}', false] ]);
</script>

^^

[ZarPrime]

Fantastic.  That works great. :up:

Thanks,
ZarPrime

[ZarPrime]

Final60,

It seems there is some sort of quirk in the weekly code.  When it ticks a day off, it seems to be adding another day or something.  I am going to watch this thing for a whole week and see what it is doing.  It's kind of hard to track down the quirk because it only ticks off a day just once a day.

Right now, I have it set to countdown to zero at 6AM UTC on Friday morning, which is midnight in the eastern time zone.  I just wanted to give you a heads up that there is something quirky about the code.  Here's the code I'm currently using and it should countdown to zero Thursday night at midnight eastern time.  We'll see what happens ...

Code Select Expand

<div id="counter3">Loading...</div>
<script type="text/javascript">
     function myCounter(o, timeArray){
         var counter = document.getElementById(o);
         if(!counter) {
             return;
         }

         // helper functions
         function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
         function toTimeString(sec, showZero){
             var d=Math.floor(sec/(60*60*24))
             var h=Math.floor(sec/(60*60)%24);
             var m=Math.floor((sec/60) % 60);
             var s=sec % 60;
             var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
             if(showZero){
                return ret;
             }else if(d==0 && h==0 && m==0){
                return s+'sec';
             }else if(d==0){
                return h+'hrs '+m+'min '+s+'sec';
             }else if(d==0 && h==0){
                return m+'min '+s+'sec';
             }else {
                return ret;
             }
         }
         //
         var secArray = [];
         var dayNow = new Date().getDay();
         for(var i=0;i<timeArray.length;i++){
            var day=timeArray[i][0];
            if(day==-1){
                day=dayNow;
            }
             secArray.push({
                day: timeArray[i][0],
                sec: mksec(day, timeArray[i][1], timeArray[i][2], timeArray[i][3]),
                msg: timeArray[i][4] || false,
                showZero: timeArray[i][5] || false
             });
         }
         secArray.sort(function(a,b){ return a.sec-b.sec;});

         // timer code - will be called around each second (~1000 ms)
         function updateCounter(){
             // get current UTC time in seconds
             var d=new Date();
             var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
             // find next event
             var nextIndex=0;
             for(var i=0;i<secArray.length; i++){
                 var diff = secArray[i].sec-secNow;
                 if(diff>0){
                     nextIndex=i;
                     break;
                 }
             }
             //
             var diff=secArray[nextIndex].sec-secNow;
             var prevDiff=diff;
             if(diff<0){
                var dayDiff = 6-secArray[nextIndex].day;
                if(secArray[nextIndex].day == -1){
                    dayDiff=0;
                }
                diff=(dayDiff+1)*24*60*60-Math.abs(diff);
             }
             var str='';
             // get message if there is any set
             if(secArray[nextIndex].msg){
                 str=secArray[nextIndex].msg;
             }
             var timeString = toTimeString(diff, secArray[nextIndex].showZero);
             if(str.match('@{counter}')!=null){
                 str=str.replace(/@{counter}/, timeString);
             }else if(str.indexOf(' ')==0){ // message starts with space
                 str=timeString+str;
             }else{ // no specific hint where to put counter, so display it after message
                 str+=timeString;
             }
             counter.innerHTML=str;
        }
     
         setInterval(updateCounter, 1000);
         
     };
myCounter('counter3', [ [5, 5, 0, 0, '<center><b>Next Turns are Due in </b><p class="smalltext"> @{counter}</center>', false] ]);
</script>

If anything pops into your head as to why this is happening, please let me know.

ZarPrime

[boomslanger]

Thanks for the great code, it has come in handy counting down to a special event for next year.

I attempted to add code to countdown in weeks but had no luck. Is it possible to have the countdown show weeks to an event?

Thanks