Обратный отсчет JQuery до конкретной даты

Question

Я пытаюсь выяснить, как построить таймер обратного отсчета в JQuery, который будет обратный отсчет до установленной даты, и как только он в этот день прибудет, будет отображаться сообщение типа «Доступно сейчас» вместо того, обратный отсчет был.

Я сделал анимацию, чтобы показать пример того, что я имею в виду, если это помогает:

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

Может кто-нибудь мне помочь? Или, может быть, указать мне на учебник или что-то, что покажет мне, как это сделать? :)

Большое вам спасибо!

Answer 1

Вот что-то маленькое, я быстро взбился. http://codepen.io/anthony-dandrea/pen/MwKxod?editors=101

Вы можете просто изменить дату, чтобы увидеть раздел «Доступно сейчас!».

$(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>

Answer 2

Посмотрите на это. Я сделал комментарии в коде. Если вопросы задают, пожалуйста. Привет 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; 
 
    \t \t \t 
 
    var hoursStr = checkForZero(hours); 
 
    var minutesStr = checkForZero(minutes); 
 
    var secondStr = checkForZero(seconds); 
 
    \t \t \t 
 
    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>