matt136 matt136 - 3 months ago 10
Javascript Question

JavaScript Shipping Countdown Timer - Reset to 0

I sourced some code for a JavaScript countdown timer and have adapted it to suit my needs. Please see the countdown timer below:

http://ts564737-container.zoeysite.com/shipping-timer

The functionality of the timer itself works perfectly. The issue is that when the timer reaches the set time, it will reset to 23:59. What I need the countdown timer to do is stay at 00:00 until the next day as this may confuse customers who think they still have a whole 23 hours 59 minutes to get free shipping.

What I want to ask you guys is whether this change would require a complete restructure of the code or whether there's a simple segment of code I could add to make it do this? My knowledge of JavaScript is limited but I am slowly learning.

Please see the code below:

JavaScript:

/* JavaScript Shipping Timer (Start) */

jQuery(document).ready(function () {
setInterval(function () {
var now = new Date();
var day = now.getDay();
var end;

if(day >= 1 && day <= 5) {
end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);
} else {
end = new Date(now.getYear(), now.getMonth(), day, 13, 0, 0, 0);
}

var timeleft = end.getTime() - now.getTime();
var diff = new Date(timeleft);


jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");

}, 1000);
});

/* JavaScript Shipping Timer (End) */


CSS:

#timeleft {
text-align: center;
font-size: 18px;
}

#timeleft h1 {
color: #000000;
font-size: 20px;
font-weight: bold;
}

#timeleft h2 {
font-size: 14px;
color: #002240;
padding-top: 10px;
}


HTML:

<div id="timeleft"></div>


Any advice or pointers that you could give me are very much appreciated. Thank you for your time.

Ted Ted
Answer

UPDATED SOLUTION BELOW

Yup! It's as easy as adding this little section:

if(timeleft >= 0){ //so if its past the time, don't update the text
    ...
}

Essentially what this does it check if there's any time left on the counter. If it hits 0, then it will stop updating the text until the next day. So your Javascript becomes:

    /* JavaScript Shipping Timer (Start) */

 jQuery(document).ready(function () {
  setInterval(function () { 
    var now = new Date();
    var day = now.getDay();
    var end;

    if(day >= 1 && day <= 5) {
        end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);    
    } else {
        end = new Date(now.getYear(), now.getMonth(), day, 13, 0, 0, 0);
    }

    var timeleft = end.getTime() - now.getTime();
    var diff = new Date(timeleft);

     if(timeleft >= 0){
         jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");
     }

  }, 1000);
});

/* JavaScript Shipping Timer (End) */

Let me know if you have any more questions, or if this doesn't do the trick.

UPDATE

Here is the JSFiddle for the working code: https://jsfiddle.net/0Lcb3bdf/27/

*Note that make sure the settings include JQuery and load with no-wrap in the head

The reason why the code wasn't working earlier is because we had a couple of mistakes in the code unrelated to the actual calculation of whether or not to show the time.

1) Instead of using day in the definition of end, we need to use now.getDate(). now.getDay() returns the day of the week, so 0-6 for Monday - Sunday, which is not what we want. now.getDate() on the other hand, returns the day of the month.

2) now.getYear() returns the numerical value of how many years have occurred since some time (maybe 1900?) that I don't know off the top of my head, since that is when the .getTime() function is based. So for example, now.getYear() in 2016 will return 116 right now I believe, or something like that. now.getFullYear() on the other hand, is what we want, as it will return the full numerical year, i.e. 2016.

3) Minor typo in the display line, we had diff.getMinutes() twice instead of the second one being diff.getSeconds()

I'll leave the original answer I had above so you can reference the old code for mistakes as well as keep the logic behind timeleft >= 0

Keep in mind with timeleft >= 0, any user that visits the website past free shipping time, will see no message at all. If you want them to see that the time has expired, you can one of the following two:

if(timeleft <= 0){
    timeleft = 0; //just permanently set it at 0 if time has expired
}
jQuery(...).html(...) //follows same template, just shows 0 if time expired

or

if(timeleft >= 0){
   jQuery(...).html(...) //display normally
}
else{
   jQuery(...).html(...) //display custom message (that can be different from template) saying free shipping time has ended
}

If you have any further questions, or need something else to be done, let me know :)

UPDATED AGAIN

Ok so hopefully this is the fully functional version:

https://jsfiddle.net/Teddarific/0Lcb3bdf/48/

I realized there was another mistake. In the actual calculation of the difference, we unfortunately can't just simply convert the difference in milliseconds to a date. I'm not entirely sure why this doesn't work (maybe someone can edit this for me), but in my head it logically doesn't make sense but I'm not quite sure how to explain it.

But in essence, we have to manually convert the difference to hours, minutes, and seconds, which is the change i have made in that fiddle. There may be a method or function that does this automatically, but I wrote it out by hand to show the logic and what-not. THIS should be the final version (fingers crossed)

Comments