www.webdeveloper.com
Results 1 to 5 of 5

Thread: datetime counter script modification

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    42

    datetime counter script modification

    Hi All,

    I am using a small script to display some counters counter (times since a certain datetime values) - now working thanks to member vwphillips. I have been trying to work out how to change the script so that the format of the results is a little different, but im stumped.

    The format of the counter is currently %%D%% Days %%H%%:%%M%%:%%S%%. However, i would like the format to be just %%H%%:%%M%%:%%S%% if the total time is less than 24 hours, otherwise i would like it to say 'more than 1 day' (for 24-48 hours), 'more than 2 days' (for 48-36 hours), etc...

    Does anyone have any idea how i can change the script to do this?

    Many thanks in advance for any ideas.

    Matt

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="cntdwn1" ></div>
    <div id="cntdwn2" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var CountDown={
    
     start:function(o){
      o.obj=document.getElementById(o.ID);
      if (o.obj){
       o.TargetDate=o.TargetDate||"12/31/2020 05:00:00";
       o.DisplayFormat = o.DisplayFormat||"%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds.";
       o.CountActive = o.CountActive!==false;
       o.FinishMessage = o.FinishMessage||"no data";
       o.CountStepper =o.CountStepper||+1;
       o.LeadingZero = o.LeadingZero!==false;
       o.CountStepper = Math.ceil(o.CountStepper);
       if (o.CountStepper == 0)
        o.CountActive = false;
       o.SetTimeOutPeriod = (Math.abs(o.CountStepper)-1)*1000 + 1000;
       var dthen = new Date(o.TargetDate),dnow = new Date(),ddiff;
       if(o.CountStepper>0)
        ddiff = new Date(dnow-dthen);
       else
        ddiff = new Date(dthen-dnow);
       this.CountBack(o,Math.floor(ddiff.valueOf()/1000));
      }
    
     },
    
     calcage:function(o,secs, num1, num2) {
      var s = ((Math.floor(secs/num1))%num2).toString();
      if (o.LeadingZero && s.length < 2)
        s = "0" + s;
      return  s;
     },
    
     CountBack:function(o,secs) {
      if (secs < 0) {
        o.obj.innerHTML = o.FinishMessage;
        return;
      }
      var oop=this,d = o.DisplayFormat.replace(/%%D%%/g, oop.calcage(o,secs,86400,100000));
      d = d.replace(/%%H%%/g, oop.calcage(o,secs,3600,24));
      d = d.replace(/%%M%%/g, oop.calcage(o,secs,60,60));
      d = d.replace(/%%S%%/g, oop.calcage(o,secs,1,60));
    
      o.obj.innerHTML = d;
      if (o.CountActive)
        o.to=setTimeout(function(){ oop.CountBack(o,secs+o.CountStepper); }, o.SetTimeOutPeriod);
     }
    
    }
    
    CountDown.start({
     ID:'cntdwn1',
     TargetDate:"06/20/2013 00:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:"%%D%% Days %%H%%:%%M%%:%%S%% "
    });
    
    CountDown.start({
     ID:'cntdwn2',
     TargetDate:"06/20/2013 00:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:"%%D%% Days %%H%%:%%M%%:%%S%% "
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="cntdwn1" ></div>
    <div id="cntdwn2" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var CountDown={
    
     start:function(o){
      o.obj=document.getElementById(o.ID);
      if (o.obj){
       o.TargetDate=o.TargetDate||"12/31/2020 05:00:00";
       o.f = (o.DisplayFormat||"D%days ,H%hours,M%minutes,S%seconds.").split(',');
       o.CountActive = o.CountActive!==false;
       o.FinishMessage = o.FinishMessage||"no data";
       o.CountStepper =o.CountStepper||+1;
       o.LeadingZero = o.LeadingZero!==false;
       o.CountStepper = Math.ceil(o.CountStepper);
       if (o.CountStepper == 0)
        o.CountActive = false;
       o.SetTimeOutPeriod = (Math.abs(o.CountStepper)-1)*1000 + 1000;
       var dthen = new Date(o.TargetDate),dnow = new Date(),ddiff;
       if(o.CountStepper>0)
        ddiff = new Date(dnow-dthen);
       else
        ddiff = new Date(dthen-dnow);
       this.CountBack(o,Math.floor(ddiff.valueOf()/1000));
      }
    
     },
    
     calcage:function(o,secs, num1, num2) {
      return  (Math.floor(secs/num1))%num2;
     },
    
     format:function(o,nu,f) {
      return nu+' '+(f.indexOf('%')>0?f.slice(f.indexOf('%')+1):':')+' ';
     },
    
     CountBack:function(o,secs) {
      if (secs < 0) {
        o.obj.innerHTML = o.FinishMessage;
        return;
      }
      var oop=this,t='',d=oop.calcage(o,secs,86400,100000),h=oop.calcage(o,secs,3600,24),m=oop.calcage(o,secs,60,60),s=oop.calcage(o,secs,1,60);
      o.f[0].charAt(0).toUpperCase()=='D'?t+=this.format(o,d,o.f[0]):h+=d*24;
      o.f[1].charAt(0).toUpperCase()=='H'?t+=this.format(o,h,o.f[1]):m+=h*60;
      o.f[2].charAt(0).toUpperCase()=='M'?t+=this.format(o,m,o.f[2]):s+=m*60;
      t+=this.format(o,s,o.f[3])
      o.obj.innerHTML = t;
      if (o.CountActive)
        o.to=setTimeout(function(){ oop.CountBack(o,secs+o.CountStepper); }, o.SetTimeOutPeriod);
     }
    
    }
    
    CountDown.start({
     ID:'cntdwn1',
     TargetDate:"06/20/2013 00:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:"D% days ,H% hours,M% minutes,S% seconds."
    });
    
    CountDown.start({
     ID:'cntdwn2',
     TargetDate:"06/20/2013 00:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:" ,H%hours,M,S% "
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2008
    Posts
    42

    not exactly...

    Thanks vwphillips for the help again.

    Actually that's not quite what i meant to achieve, I should explain better: The datetime values are passed from php. The values may be anything from seconds ago to days ago. I was aiming for the script to output times in hours, mins and seconds if the datetime value is recent (less than 24 hours), but just the number of days if it is older (more than 24 hours).

    Eg, if the datetime now is : 06/22/2013 19:50

    then datetime 06/22/2013 19:40 would display as 0 hours 10 mins 0 seconds
    and datetime 06/21/2013 19:55 would display as 23 hours 55 mins 0 seconds
    and dateitme 06/21/2013 19:00 would display as more than 24 hours
    and datetime 06/20/2013 19:00 would display as more than 48 hours (etc... in 24 hour increments)

    Any ideas how to do this?

    Thanks again for the help,

    Matt

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="cntdwn1" ></div>
    <div id="cntdwn2" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var CountDown={
    
     start:function(o){
      o.obj=document.getElementById(o.ID);
      if (o.obj){
       o.TargetDate=o.TargetDate||"12/31/2020 05:00:00";
       var date=o.TargetDate,y=date.split(' ')[0].split('/'),t=date.split(' ')[1].split(':');
       o.date=new Date(y[2],y[0]-1,y[1],t[0],t[1],(t[2]||0));
       o.f = (o.DisplayFormat||"D%days ,H%hours,M%minutes,S%seconds.").split(',');
       o.CountActive = o.CountActive!==false;
       o.FinishMessage = o.FinishMessage||"no data";
       o.CountStepper =o.CountStepper||+1;
       o.LeadingZero = o.LeadingZero!==false;
       o.CountStepper = Math.ceil(o.CountStepper);
       if (o.CountStepper == 0)
        o.CountActive = false;
       o.SetTimeOutPeriod = (Math.abs(o.CountStepper)-1)*1000 + 1000;
       var dthen = new Date(o.TargetDate),dnow = new Date(),ddiff;
       if(o.CountStepper>0)
        ddiff = new Date(dnow-dthen);
       else
        ddiff = new Date(dthen-dnow);
        this.CountBack(o,Math.floor(ddiff.valueOf()/1000));
      }
    
     },
    
     calcage:function(s, n1, n2) {
      return (Math.floor(s/n1))%n2;
     },
    
     format:function(o,nu,f) {
      return nu+' '+(f.indexOf('%')>0?f.slice(f.indexOf('%')+1):':')+' ';
     },
    
     CountBack:function(o) {
      var oop=this,secs=Math.floor((o.date-new Date())/1000),t='',d=oop.calcage(secs,86400,100000),h=oop.calcage(secs,3600,24),m=oop.calcage(secs,60,60),s=oop.calcage(secs,1,60);
      if (secs < 0) {
        o.obj.innerHTML = o.FinishMessage;
        return;
      }
      o.f[0].charAt(0).toUpperCase()=='D'?t+=this.format(o,d,o.f[0]):h+=d*24;
      o.f[1].charAt(0).toUpperCase()=='H'?t+=this.format(o,h,o.f[1]):m+=h*60;
      o.f[2].charAt(0).toUpperCase()=='M'?t+=this.format(o,m,o.f[2]):s+=m*60;
      t+=this.format(o,s,o.f[3])
      o.obj.innerHTML = t;
      if (o.CountActive)
        o.to=setTimeout(function(){ oop.CountBack(o); }, o.SetTimeOutPeriod);
     }
    
    }
    
    CountDown.start({
     ID:'cntdwn1',
     TargetDate:"06/23/2013 15:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:"D% days ,H% hours,M% minutes,S% seconds."
    });
    
    CountDown.start({
     ID:'cntdwn2',
     TargetDate:"06/24/2013 00:00:01",
     FinishMessage:"done",
     CountActive:true,
     LeadingZero:true,
     DisplayFormat:" ,H%hours,M,S% "
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Dec 2008
    Posts
    42

    getting closer...

    Hi,

    Thanks again for the efforts- Not quite what im aiming for either but its getting closer i think. However, its now displaying a count down timer to future dates, where as i want it to be a count up timer from past dates (like in the past couple editions).

    Using DisplayFormat:" ,H%hours,M,S% " is closest to what im after, but it now counts the total number of hours, where as i want it to display H hours, M mins S secs if hrs<24, otherwise simply say 'more than 1 day' if hrs>24 (and not display a value for mins or secs at all).... 'more than 2 days' if hrs>48 etc...

    Cheers,

    Matt

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles