Hey folks, here’s a nifty script that you can use to have a countdown timer. It’s also useful if you want a page to redirect at a specific time of day. For instance, if the sales of a client’s program ends at midnight, you can use this script to countdown to midnight and redirect to a different page after that time.
Got it from here…
https://gist.github.com/nbrombal/63923dda778c67f43ffa
Here’s the code:
<script>
(function($) {
// If target date is specific to one timezone, set to true and specify it
var absoluteTarget = true;
// this number is the number of hours behind Greenwich Mean Time you are setting your clock to.
// In this example, it's set to Pacific time, which is 7 hours behind GMT.
var targetTimeZone = -7;
// You set the target date/time with var targetDateUTC.
//Use this documentation to get an understanding of the numbers below: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
var targetDateUTC = new Date(Date.UTC(2017,04,24,21,0)).getTime();
var currentDate = new Date();
var timeZoneOffset = (absoluteTarget ? targetTimeZone * -60 : currentDate.getTimezoneOffset()) * 60 * 1000;
var targetDate = targetDateUTC + timeZoneOffset;
var getCountdown = function() {
var totalSeconds = (targetDate - Date.now())/1000;
var days = Math.floor(totalSeconds / (60 * 60 * 24));
var hours = Math.floor(totalSeconds / (60 * 60)) % 24;
var minutes = Math.floor(totalSeconds / 60) % 60;
var seconds = Math.floor(totalSeconds) % 60;
if ( currentDate > targetDate ) {
// Redirect to specific URL
window.location.replace("http://jennjoycoaching.com/");
} else {
// I've commented the below out to NOT show the actual timer.
// if you want to show the timer, see the HTML markup below
// Display the remaining time
//$('.clock .days').html(days);
//$('.clock .hours').html(hours);
//$('.clock .minutes').html(minutes);
//$('.clock .seconds').html(seconds);
}
};
setInterval(getCountdown, 1000);
getCountdown();
})(jQuery);
</script>
HTML Markup for timer
<div class="clock">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>