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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cont down Timer adding Code

    Hi Everyone,
    i have found a count down timer and i am using it on my website, it is so close to what i need but it does need a little tweaking and i have no idea were to start with js but am sure it something simple for someone to complete who know what they are doing

    i have a js timer that counts down to 3pm monday - friday eg "Order before 3pm (Mon–Fri) for same-day despatch." what i need the timer to do is once it has reached the cut off time 3pm i would like it to start counting down again.... eg so after 3 pm on Monday instead of showing 00:00 it will start count down again eg 23:59.59 then once it reaches Friday at 3pm it starts counting down to the next cut off time which will be Monday at 3pm as we do not ship weekends. this is the code i a have so far

    Code:
    if (document.getElementById('countdownTimer')) {
      pad = function(n, len) { // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
      };
    
      var timerRunning = setInterval(
        function countDown() {
          var now = new Date();
          if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
            var target = 15; // 15:00hrs is the cut-off point
            if (now.getHours() < target) { // don't do anything if we're past the cut-off point
              var hrs = (target - 1) - now.getHours();
              if (hrs < 0) hrs = 0;
              var mins = 59 - now.getMinutes();
              if (mins < 0) mins = 0;
              var secs = 59 - now.getSeconds();
              if (secs < 0) secs = 0;
              var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
              document.getElementById('countdownTimer').innerHTML = str;
            }
          }
        }, 1000
      );
    }
    Hope some one can help as it is nearly were i want it to be
    Best Regards

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 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>
    </head>
    
    <body>
    <div id="countdownTimer" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var delivery=[
     '',     // sunday
     '15',
     '15',
     '15',
     '15',
     '15',
     ''      // saterday
    ];
    
    function pad(n){
     return (n<10?'0':'')+n;
    }
    
    if (document.getElementById('countdownTimer')){
     setInterval(function(){
      var n=new Date(),d=n.getDay(),h=n.getHours(),z0,nd=new Date(),s;
      if (delivery[d]&&h<delivery[d]){
       nd=new Date(n.getFullYear(),n.getMonth(),n.getDate(),delivery[d]);
      }
      else {
       for (z0=d+1;z0<d+8;z0++){
        if (delivery[z0%7]){
         nd=new Date(n.getFullYear(),n.getMonth(),n.getDate()+z0-d,delivery[z0%7]);
         break;
        }
       }
      }
      s=Math.floor((nd-n)/1000);
      document.getElementById('countdownTimer').innerHTML = pad(Math.floor(s/3600)) + ':' + pad(Math.floor(s/60)%60) + '.<small>' + pad(s%60) + '</small>';
    },1000);
    }
    
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    SP1965 (07-29-2014)

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Brilliant, and a massive Thank You for your time, it is very much appreciated...
    i have added your code so hopefully everything will now function corectly, i take it i just overwrite the code im my other file with your code

    Code:
    var delivery=[
     '',     // sunday
     '15',
     '15',
     '15',
     '15',
     '15',
     ''      // saterday
    ];
    
    function pad(n){
     return (n<10?'0':'')+n;
    }
    
    if (document.getElementById('countdownTimer')){
     setInterval(function(){
      var n=new Date(),d=n.getDay(),h=n.getHours(),z0,nd=new Date(),s;
      if (delivery[d]&&h<delivery[d]){
       nd=new Date(n.getFullYear(),n.getMonth(),n.getDate(),delivery[d]);
      }
      else {
       for (z0=d+1;z0<d+8;z0++){
        if (delivery[z0%7]){
         nd=new Date(n.getFullYear(),n.getMonth(),n.getDate()+z0-d,delivery[z0%7]);
         break;
        }
       }
      }
      s=Math.floor((nd-n)/1000);
      document.getElementById('countdownTimer').innerHTML = pad(Math.floor(s/3600)) + ':' + pad(Math.floor(s/60)%60) + '.<small>' + pad(s%60) + '</small>';
    },1000);
    }

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have tested your code and it is working great, Can you please tell me how can i put a (H) before the hours, (M) before the minutes and an (S) before the seconds on the count down clock
    really appreciate your help
    Best Regards

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 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>
    </head>
    
    <body>
    <div id="countdownTimer" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var delivery=[
     '',     // sunday
     '15',
     '15',
     '15',
     '15',
     '15',
     ''      // saterday
    ];
    
    function pad(n){
     return (n<10?'0':'')+n;
    }
    
    if (document.getElementById('countdownTimer')){
     setInterval(function(){
      var n=new Date(),d=n.getDay(),h=n.getHours(),z0,nd=new Date(),s;
      if (delivery[d]&&h<delivery[d]){
       nd=new Date(n.getFullYear(),n.getMonth(),n.getDate(),delivery[d]);
      }
      else {
       for (z0=d+1;z0<d+8;z0++){
        if (delivery[z0%7]){
         nd=new Date(n.getFullYear(),n.getMonth(),n.getDate()+z0-d,delivery[z0%7]);
         break;
        }
       }
      }
      s=Math.floor((nd-n)/1000);
      document.getElementById('countdownTimer').innerHTML = 'H'+pad(Math.floor(s/3600)) + ':M' + pad(Math.floor(s/60)%60) + '.<small>S' + pad(s%60) + '</small>';
    },1000);
    }
    
    /*]]>*/
    </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/

  • #6
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks again for you prompt reply, i managed to figure it out but i added this
    Code:
      document.getElementById('countdownTimer').innerHTML = pad(Math.floor(s/3600)) + ' Hr : ' + pad(Math.floor(s/60)%60) + ' Min : <small> ' + pad(s%60) + ' Sec</small>';
    is this the wrong way or will it be ok?
    Best Regards


  •  

    Posting Permissions

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