Web Analytics Made Easy -
StatCounter Countdown to 1pm then reset. - CodingForum

Announcement

Collapse
No announcement yet.

Countdown to 1pm then reset.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Countdown to 1pm then reset.

    Hello people,

    I'm pretty new to JS and am creating an online store. I would like a little help with a countdown timer for 'next day delivery cutoff'.

    I found a 24hr Countdown Clock Loop in a previous post that I think could be a good start point to be edited. I wonder if anyone could help.


    I would like the timer to countdown to 1PM and output the next days date while counting down. After 1PM it should reset and output the following days date.

    I hope this makes sense. Any help would be much appriciated.

    Thanks,

    Josh.


    -

  • #2
    Try this:-

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body onload = "getSeconds()">
    
    <div id = "countdown" style = "color:red; font-size:20pt; font-weight:bold;"> </div>
    
    <script type = "text/javascript">
    
    function getSeconds() {
    var now = new Date();
    var time = now.getTime();  // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),13,0,0); // 1pm = 1300hrs
    // midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    
    var ft = midnight.getTime() + 86400000;  // add one day
    var diff = ft - time;  
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
    }
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    getSeconds();  // and start again if required
    }
    
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                      + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
    
    var dy = new Date().getDay();
    var hrs = new Date().getHours();
    if ((dy==5) && (hrs >=13)) {result =  "2 days " + result}  // Friday after 1300
    if ((dy==6) && (hrs <13)) {result = "2 days " + result}  // Saturday before 1300
    if ((dy==6) && (hrs >= 13)) {result = "1 day " + result}   // Saturday after 1300
    if ((dy==0) && (hrs <13)) {result = "1 day " + result}  // Sunday before 1300
    
    document.getElementById("countdown").innerHTML = "Order now for our next delivery dispatch in " + result;
    }
    </script>
    
    </body>
    </html>
    "Political language - and with variations this is true of all political parties from Conservatives to Anarchists - is designed to make lies sound truthful and murder respectable, and to give the appearance of solidity to pure wind". - George Orwell, English novelist and journalist, 1903-1950.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Hi Phillip,

      Thanks for that. Works well.

      Is there a way I could attach an 'If statement' that outputs a date depending on if its before or after 1PM today? Either tomorrow's date or the day after respectively. Output it to a var that i can display in my HTML?

      Thanks for the help,

      Josh.

      Comment


      • #4
        Yes, that is very easy, but this forum is not a free coding service so I don't feel able to do everything for you. You are entitled to help, but not to ask people to do the whole job for you. You already have var hrs = new Date.getHours(), so all you need to do is if hrs <= 13 write the current date out to a variable displayed using innerHTML, if hrs > 13 write out tomorrow's date. But what about Saturday and Sunday?

        To add one day to the current date, use

        Code:
        var d = new Date();
        d.setDate(d.getDate() + 1);
        alert (d);
        Last edited by Philip M; Sep 22, 2016, 11:43 AM.

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          I understand. Don't worry I'm going to give it a go. I think I'm trying to run before I crawl but I shall have a crack at it and get back to you.

          Thanks for your help and encouragement.

          Comment


          • #6
            Ok, Phillip.

            ...be gentle

            Code:
            <body onload = "getSeconds()">
            
            <div id = "countdown" style = "color:red; font-size:20pt; font-weight:bold;"> </div>
            
            <script type = "text/javascript">
            
            function getSeconds() {
            var now = new Date();
            var time = now.getTime();  // time now in milliseconds
            var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),13,0,0); // 1pm = 1300hrs
            // midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
            
            var ft = midnight.getTime() + 86400000;  // add one day
            var diff = ft - time;  
            diff = parseInt(diff/1000);
            if (diff > 86400) {diff = diff - 86400}
            startTimer (diff);
            }
            
            var timeInSecs;
            var ticker;
            
            function startTimer(secs){
            timeInSecs = parseInt(secs);
            ticker = setInterval("tick()",1000); 
            tick(); // to start counter display right away
            }
            
            function tick() {
            var secs = timeInSecs;
            if (secs>0) {
            timeInSecs--;
            }
            else {
            clearInterval(ticker); // stop counting at zero
            getSeconds();  // and start again if required
            }
            
            var hours= Math.floor(secs/3600);
            secs %= 3600;
            var mins = Math.floor(secs/60);
            secs %= 60;
            var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                              + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
            
            var dy = new Date().getDay();
            var hrs = new Date().getHours();
            if ((dy==5) && (hrs >=13)) {result =  "2 days " + result}  // Friday after 1300
            if ((dy==6) && (hrs <13)) {result = "2 days " + result}  // Saturday before 1300
            if ((dy==6) && (hrs >= 13)) {result = "1 day " + result}   // Saturday after 1300
            if ((dy==0) && (hrs <13)) {result = "1 day " + result}  // Sunday before 1300
            
             
            
            
            // My weekday converter -----------------
              
            var day = new Date().getDay()
            
            var weekday=new Array(7);
            weekday[1]="Monday";
            weekday[2]="Tuesday";
            weekday[3]="Wednesday";
            weekday[4]="Thursday";
            weekday[5]="Friday";
            weekday[6]="Saturday";
            weekday[0]="Sunday";
            
            
            
            // My If statements and output -----------------
              
              if ((day ==1) && (hrs >=13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                
              }
              
              if ((day ==1) && (hrs >13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Wednesday!";
                
              }
              
              if ((day ==2) && (hrs >=13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                
              }
              
              if ((day ==2) && (hrs >13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Thursday!";
                
              }
              
              if ((day ==3) && (hrs >=13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                
              }
              
              if ((day ==3) && (hrs >13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Friday!";
                
              }
              
              if ((day ==4) && (hrs >=13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package Tomorrow!";
                
              }
              
              if ((day ==4) && (hrs >13)) {
              
              document.getElementById("countdown").innerHTML = "Order now and get your package on Monday";
                
              }
              
              
              if ((day ==5) && (hrs >=13)) {
              
              document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Monday";
                
              }
              
              if ((day ==5) && (hrs >13)) {
              
              document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
                
              }
              
              if (day ==6) {
              
              document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
                
              }
              
              if (day ==0) {
              
              document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
              
              }
              
              
            }
              
              
            </script>
            
            </body>

            ...I like space.

            Josh.

            Comment


            • #7
              Just realised I left 'my weekday converter in' and am not really using it. (Though I may use it in the future, so i'll leave it in.)

              Comment


              • #8
                Ah!! Spotted my massive mistake!!

                Update:
                Code:
                <script type = "text/javascript">
                
                function getSeconds() {
                var now = new Date();
                var time = now.getTime();  // time now in milliseconds
                var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),13,0,0); // 1pm = 1300hrs
                // midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
                
                var ft = midnight.getTime() + 86400000;  // add one day
                var diff = ft - time;  
                diff = parseInt(diff/1000);
                if (diff > 86400) {diff = diff - 86400}
                startTimer (diff);
                }
                
                var timeInSecs;
                var ticker;
                
                function startTimer(secs){
                timeInSecs = parseInt(secs);
                ticker = setInterval("tick()",1000); 
                tick(); // to start counter display right away
                }
                
                function tick() {
                var secs = timeInSecs;
                if (secs>0) {
                timeInSecs--;
                }
                else {
                clearInterval(ticker); // stop counting at zero
                getSeconds();  // and start again if required
                }
                
                var hours= Math.floor(secs/3600);
                secs %= 3600;
                var mins = Math.floor(secs/60);
                secs %= 60;
                var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                                  + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
                
                var dy = new Date().getDay();
                var hrs = new Date().getHours();
                if ((dy==5) && (hrs >=13)) {result =  "2 days " + result}  // Friday after 1300
                if ((dy==6) && (hrs <13)) {result = "2 days " + result}  // Saturday before 1300
                if ((dy==6) && (hrs >= 13)) {result = "1 day " + result}   // Saturday after 1300
                if ((dy==0) && (hrs <13)) {result = "1 day " + result}  // Sunday before 1300
                
                 
                  
                  
                var day = new Date().getDay()
                  
                    // Weekday converter
                var weekday=new Array(7);
                weekday[1]="Monday";
                weekday[2]="Tuesday";
                weekday[3]="Wednesday";
                weekday[4]="Thursday";
                weekday[5]="Friday";
                weekday[6]="Saturday";
                weekday[0]="Sunday";
                
                  
                  
                  if ((day ==1) && (hrs <13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                    
                  }
                  
                  if ((day ==1) && (hrs >=13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Wednesday!";
                    
                  }
                  
                  if ((day ==2) && (hrs <13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                    
                  }
                  
                  if ((day ==2) && (hrs >=13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Thursday!";
                    
                  }
                  
                  if ((day ==3) && (hrs <13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on tomorrow!";
                    
                  }
                  
                  if ((day ==3) && (hrs >=13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Friday!";
                    
                  }
                  
                  if ((day ==4) && (hrs <13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package Tomorrow!";
                    
                  }
                  
                  if ((day ==4) && (hrs >=13)) {
                  
                  document.getElementById("countdown").innerHTML = "Order now and get your package on Monday";
                    
                  }
                  
                  
                  if ((day ==5) && (hrs <13)) {
                  
                  document.getElementById("countdown").innerHTML = "You have " + result + " to get your package on Monday";
                    
                  }
                  
                  if ((day ==5) && (hrs >=13)) {
                  
                  document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
                    
                  }
                  
                  if (day ==6) {
                  
                  document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
                    
                  }
                  
                  if (day ==0) {
                  
                  document.getElementById("countdown").innerHTML = "Order now and get your package on Tuesday";
                  
                  }
                  
                  
                }
                  
                  
                </script>

                Comment


                • #9
                  Looks good to me! Nice to know that you are trying to get to grips with Javascript.

                  Use your error console (F12 key) to expose possible errors in the code.
                  Last edited by Philip M; Sep 23, 2016, 12:36 PM.

                  All the code given in this post has been tested and is intended to address the question asked.
                  Unless stated otherwise it is not just a demonstration.

                  Comment


                  • #10
                    Hello,

                    Thanks for the script, works fine.

                    But i have 2 questions.

                    The script is now using clients time but i need the server time?

                    And how do i add NO delivery (Holiday) dates? Like Christmas etc... Then there is only a message to be shown.

                    Thanks, Henri

                    Comment


                    • #11
                      If you require server time, then your must use a server-side langauge such as php. Javascript functions purely client-side.

                      It is possible to schedule holidays, but to do that you need to specify exactly what the holidays are. That varies from country to country.

                      All the code given in this post has been tested and is intended to address the question asked.
                      Unless stated otherwise it is not just a demonstration.

                      Comment


                      • #12
                        Dear Philip,

                        How do i add server time and holidays to the script?


                        I am a newbie about javascript.

                        I would be glad if you help me and make the example?

                        The holidays dates then i can add myself.

                        Kind regards,

                        Henri

                        Comment


                        • #13
                          Henri - Sorry but I don't have that much time to spare. This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, but try to help with fixing code that doesn't work. You'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

                          I would advise you to learn Javascript. Without that you are unlikely to make much progress.

                          Try Google for an example of server-time.
                          Javascript clock with server time PHP - Stack Overflow

                          Your holiday messages might look like this:-

                          var d = new Date(); // the current date
                          var mth = d.getMonth();
                          var dy = d.getDate();
                          if ((mth == 11) && (dy == 25)) { // 25th December. In Javascript months are 0-11
                          document.getElementById("holidaymessage").innerHTML = the message you want to display.
                          }
                          Last edited by Philip M; Apr 30, 2017, 07:51 AM.

                          All the code given in this post has been tested and is intended to address the question asked.
                          Unless stated otherwise it is not just a demonstration.

                          Comment

                          Working...
                          X