JQuery Countdown to Specific Date

Question

I'm trying to figure out how to build a countdown timer in JQuery that will countdown to a set date and once it that day arrives it will display a message like "Available Now" in place of where the countdown was.

I made an animation to show an example of what I mean if that helps:

https://i.stack.imgur.com/qYthR.gif

Can anyone help me? Or maybe point me towards a tutorial or something that will show me how to do this? :)

Thank you so much!

What have you tried so far? Have you tried to google for _jquery countdown timer_? [This was the second result](http://keith-wood.name/countdown.html). — nonsensickle, May 12 '15 at 02:09
possible duplicate of [Code for a simple JavaScript countdown timer?](http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer) — Nathan Tuggy, May 12 '15 at 02:10
http://greensock.com/tweenlite you could reverse engineer this example — Daniel Tate, May 12 '15 at 02:14

score 2 · Answer 1 · answered May 12 '15 at 03:02

Look at this. I made comments into the code. If questions ask, please. Greetings ANdré

var availableDate=new Date();
//set eg "May 12 2015 05:01:00"
availableDate.setDate(12);
availableDate.setMonth(4);//January has index 0!!!
availableDate.setFullYear(2015);
availableDate.setHours(5);
availableDate.setMinutes(1);//January has index 0!!!
availableDate.setSeconds(0);
 
var availableDateField =$("#availableDate");
availableDateField.text(availableDate);

var timeField =$("#time");

var t=setInterval(loop,1000); //(handler,intervall in ms)
function loop(){
  //get current Date (now)
  var now=new Date();
  //get difference
  var diff=availableDate - now;
  //if the time has come ;-)
  if(diff<=0){     
    clearInterval(t);
    timeField.text("Time has Come");
    return false;
  }
  //if not
  var str= "Time to wait: "+parseMs(diff);    
  timeField.text(str);
}

function parseMs(ms){
  //ToDO for you: Years, months and days :-)
  var hours = Math.floor(ms/(3600000))
  ms = ms % 3600000;
  var minutes = Math.floor(ms / 60000 );
  ms = ms % 60000;
  var seconds = Math.floor(ms / 1000);
  ms = ms % 1000;
    
  var hoursStr = checkForZero(hours);
  var minutesStr = checkForZero(minutes);
  var secondStr = checkForZero(seconds);
    
  var timeString = hoursStr + ":" + minutesStr + ":" + secondStr;
  return timeString;
}

function checkForZero(i){
  //write "0" before ?
  str=i+"";
  if (parseInt(i,10) < 10) str = "0" + str;
  return str;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=availableDate>
</div>
<div id=time>
</div>

0

anthony-dandrea · Answer 2 · 2015-05-12T03:24:01.947

Here's something small I whipped up really quick. http://codepen.io/anthony-dandrea/pen/MwKxod?editors=101

You can just change the date to see the "Available Now!"

$(document).ready(function() {
  var countdownHtml = $('#countdown');
  var today = new Date;
  var offerDate = new Date(2015, 5, 1); // June 1st, 2015
  if (offerDate > today) {
    var timeDiff = Math.ceil(Math.abs(offerDate.getTime() - today.getTime())/864e5);
    countdownHtml.text(timeDiff+' days until available!');
  } else {
    countdownHtml.text('Available now!');
  }
});

<p id="countdown"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JQuery Countdown to Specific Date

2 Answers2