Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple countdown timers

    Hello all,

    It's my first post. I have 0 javascript knowledge and desperately need your help.

    I need 5 countdown timers on my html site. I would like them to countdown from different minutes (i.e. 2:30, 5:15, 1:20, etc).

    Here is the script I found online:

    <!--countdown timer -->
    <div style="position:absolute; overflow:hidden; left:107px; top:390px; width:40px; height:20px; z-index:18">
    <script language="JavaScript">
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
    BackColor = "#FFFFFF";
    ForeColor = "#FF6633";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%M%%:%%S%%";
    FinishMessage = "SOLD!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>
    I pasted them in the div tags and it works perfectly. However, when I copy and paste them 4 times for a total of 5 timers to display, only 1 shows.

    Why is this happening and how can I fix it?

    Here is how I it looks on my index file after I pasted it 4 times:
    <div id="count1" style="position:absolute; overflow:hidden; left:107px; top:390px; width:45px; height:20px; z-index:29">
    <script language="JavaScript">
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
    BackColor = "#FFFFFF";
    ForeColor = "#FF6633";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%M%%:%%S%%";
    FinishMessage = "SOLD!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>

    <div id="count2" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:30">
    <script language="JavaScript">
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
    BackColor = "#FFFFFF";
    ForeColor = "#FF6633";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%M%%:%%S%%";
    FinishMessage = "SOLD!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>

    <div id="count3" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:31">
    <script language="JavaScript">
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
    BackColor = "#FFFFFF";
    ForeColor = "#FF6633";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%M%%:%%S%%";
    FinishMessage = "SOLD!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>

    <div id="count4" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:32">
    <script language="JavaScript">
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
    BackColor = "#FFFFFF";
    ForeColor = "#FF6633";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%M%%:%%S%%";
    FinishMessage = "SOLD!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>

    Please help!!

    Sincerely,
    George

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function zxcDHMS(zxcsecs,zxcd,zxcp,zxc0){
     zxcsecs=((Math.floor(zxcsecs/zxcd))%zxcp);
     return zxcsecs>9?zxcsecs:'0'+zxcsecs;
    }
    
    function zxcCountDown(zxcid,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays){
     var zxcobj=document.getElementById(zxcid);
     var zxcoop=zxcobj.oop
     if (!zxcoop) zxcobj.oop=new zxcCountDownOOP(zxcobj,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays);
     else {
      clearTimeout(zxcoop.to);
      zxcoop.mess=zxcmess;
      zxcoop.mhd=[zxcmins,zxchrs,zxcdays];
      zxcoop.srt=new Date().getTime();
      zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
      zxcoop.end=((zxcoop.fin-zxcoop.srt));
      zxcoop.to=null;
      zxcoop.cng();
     }
    }
    
    function zxcCountDownOOP(zxcobj,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays){
     this.obj=zxcobj;
     this.mess=zxcmess;
     this.mhd=[zxcmins,zxchrs,zxcdays];
     this.srt=new Date().getTime();
     this.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
     this.end=((this.fin-this.srt));
     this.to=null;
     this.cng();
    }
    
    zxcCountDownOOP.prototype.cng=function(){
     var zxcnow=new Date().getTime();
     if (this.end-Math.floor((zxcnow-this.fin)/1000)>0){
      var zxcsecs=this.end-Math.floor((zxcnow-this.fin)/1000)-1;
      this.obj.innerHTML=(this.mhd[2]?zxcDHMS(zxcsecs,86400,100000)+' days ':'')+(this.mhd[1]||this.mhd[2]?zxcDHMS(zxcsecs,3600,24)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?zxcDHMS(zxcsecs,60,24)+' minutes ':'')+zxcDHMS(zxcsecs,1,60)+' seconds';
      this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),1000);
     }
     else this.obj.innerHTML=this.mess||'';
    }
    /*]]>*/
    </script></head>
    
    <body onload="zxcCountDown('tst','message',20);zxcCountDown('tst1','message 1',20,1);">
    
    <span id="tst" ></span>
    <br />
    <span id="tst1" ></span>
    <input type="button" name="" value="REStart" onclick="zxcCountDown('tst1','message 2',10);"/>
    
    </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
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic,

    THANK YOU SOOOOOOOOOOO MUCH!!!

    I see that your a believer!! I am too. Obviously God was using my friend! Thank you sincerely and I pray blessing upon your life!

    Thank you again,
    George

  • #4
    New Coder
    Join Date
    Feb 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey

    How do you edit this code to have the multiple timers but without reseting the count down when the page is reloaded?

    thanks

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Re-loading the page

    <body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1);">

    necessarily starts the scripts running again and re-sets the starting times.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Re-loading the page

    <body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1);">

    necessarily starts the scripts running again and re-sets the starting times.
    hi
    i need this script badly but it shows incorrect output when i add hours parameter in it
    Code:
    <body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1,3);">
    pls help me i need this script badly pls tell me what im doing wrong in calling this function

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    There's a goof in his code:
    Code:
      zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
    He is adding *seconds* to the getTime(), but getTime() returns a time in *MILLIseconds*.

    Since he later divides by 1000 when calculating with that "fin" value, clearly he intended it to be milliseconds.

    So try this:
    Code:
      zxcoop.fin = new Date().getTime()
            + 1000 * ((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
    Same bug in the zxcCountDownOOP function, by the by.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    There's a goof in his code:
    Code:
      zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
    He is adding *seconds* to the getTime(), but getTime() returns a time in *MILLIseconds*.

    Since he later divides by 1000 when calculating with that "fin" value, clearly he intended it to be milliseconds.

    So try this:
    Code:
      zxcoop.fin = new Date().getTime()
            + 1000 * ((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
    Same bug in the zxcCountDownOOP function, by the by.
    hi thanks for the reply but

    it still give the incorrect seconds results im calling the function like

    Code:
    <body onload="zxcCountDown('tst','message',20);zxcCountDown('tst1','message 1',20,11,4);">

    but the Seconds starts from 35 instead of 20

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Dunno. That's VWPhillip's code. He is still active here. Maybe PM him and ask for clarification?

    That's the bug I saw, but there could be others.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Dunno. That's VWPhillip's code. He is still active here. Maybe PM him and ask for clarification?

    That's the bug I saw, but there could be others.
    Hi Pedant,
    thanks for the reply, I have PMd him as discussed, this code works like a charm. It could be a tiny bug

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcCountDown(id,mess,secs,mins,hrs,days){
     var obj=document.getElementById(id);
     var oop=obj.oop
     if (!oop) obj.oop=new zxcCountDownOOP(obj,mess,secs,mins,hrs,days);
     else {
      clearTimeout(oop.to);
      oop.mess=mess;
      oop.mhd=[mins,hrs,days];
      oop.srt=new Date().getTime();
      oop.fin=new Date().getTime()+((days||0)*86400)+((hrs||0)*3600)+((mins||0)*60)+((secs||0));
      oop.end=((oop.fin-oop.srt));
      oop.to=null;
      oop.cng();
     }
    }
    
    function zxcCountDownOOP(obj,mess,secs,mins,hrs,days){
     this.obj=obj;
     this.mess=mess;
     this.mhd=[mins,hrs,days];
     var date=new Date();
     this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMinutes()+(mins||0),date.getSeconds()+(secs||0));
     this.to=null;
     this.cng();
    }
    
    zxcCountDownOOP.prototype.cng=function(){
     var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
     if (this.fin-now>-500){
      this.obj.innerHTML=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
      this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
     }
     else {
      this.obj.innerHTML=this.mess||'';
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">
    
    <span id="tst" ></span>
    <br />
    <span id="tst1" ></span>
    </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/

  • Users who have thanked vwphillips for this post:

    chunk (03-26-2011)

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much phillips
    thanks a lot for the great help :-)

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    corrected to allow restart

    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcCountDown(id,mess,secs,mins,hrs,days){
     var obj=document.getElementById(id);
     var oop=obj.oop
     if (!oop){
      obj.oop=new zxcCountDownOOP(obj);
     }
     obj.oop.start(mess,secs,mins,hrs,days);
    }
    
    function zxcCountDownOOP(obj,mess){
     this.obj=obj;
     this.to=null;
    }
    
    zxcCountDownOOP.prototype={
    
     start:function(mess,secs,mins,hrs,days){
      clearTimeout(this.to);
      this.mess=mess;
      this.mhd=[mins,hrs,days];
      var date=new Date();
      this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMinutes()+(mins||0),date.getSeconds()+(secs||0));
      this.cng();
     },
    
     cng:function(){
      var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
      if (this.fin-now>-500){
       this.obj.innerHTML=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
       this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
      }
      else if (this.mess){
       this.obj.innerHTML=this.mess;
      }
     }
    
    }
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">
    
    <span id="tst" ></span> <input type="button" name="" value="Re-Start" onmouseup="zxcCountDown('tst','message',20);"/>
    <br />
    <span id="tst1" ></span>
    </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/

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for the great help,
    everyone pls note here when u call the function then call it like

    Code:
    zxcCountDown('tst1','message 1',20,11,4);
    because when using it inside php calling more than 1 time in one page you might call the function like

    Code:
    zxcCountDown('tst1','message 1','20','11','4');
    do not use Single or Double on the secs, mind, hours, days parameter it will give incorrect output, So call without Quotes

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Even in PHP, that's a mistake. You shouldn't put quote marks around numbers.

    It happens to work in PHP (and sometimes in JavaScript) because both languages *will* convert a string to a number for you if they can figure out that's what you meant to have happen.

    But sometimes, even PHP can't tell what you meant and can get it wrong.

    It happens more often in JavaScript because in JS the + operator is used *both* for arithmetic (addition) and for string concatenation. In PHP, you use a period to concatenate strings so there's no confusion when using something like
    Code:
         "3" + "72"
    PHP *will* convert the strings to numbers and do addition. JavaScript would string concatenate and give you "372".

    Anyway, every time you use a string where a number is meant, you cause the language (either language) to do a string-to-number conversion, and that's actually a pretty slow process. So avoid it when you can.

    EDIT: By the by, in JavaScript, if you do
    Code:
        "3" * "7"
    even JS will convert the strings to numbers and do multiplication. For the most part, it's only + that causes problems.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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