web-dev-qa-db-fra.com

Décompte à partir d'une date donnée à l'aide de flipclock.js

J'utilise http://flipclockjs.com/

Ceci est mon script d'appel jusqu'à présent,

<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
    clockFace: 'DailyCounter',
    countdown: true,
});
</script>

S'il vous plaît, quelqu'un pourrait-il me dire comment je peux compter à partir d'une date exacte? 

Ainsi, par exemple, la date est le 21 juillet 2014 en heure anglaise et toutes les personnes visitant ce site verront combien de temps il reste avant cette date en fonction de la date actuelle.

javascriptdatetimeflipclock
13
Third_Hyperion

C'est ce que j'utilise 

<div class="clock"></div>
<script type="text/javascript">
    var date = new Date(2015, 6, 21);
    var now = new Date();
    var diff = (date.getTime()/1000) - (now.getTime()/1000);

    var clock = $('.clock').FlipClock(diff,{
        clockFace: 'DailyCounter',
        countdown: true
    });  
</script>

Les mois sont basés sur zéro, donc juillet étant le septième mois, utilise 6.

20
Matt Miller

@ Matt, excellent exemple, mais je peux comprendre pourquoi "coolshrimp" a publié une formule similaire, les deux sont à moitié correctes.

Sur mon site Web, lorsque j'utilise jsfiddle, je souhaite également afficher "Heures", "Minutes" et "Secondes", l'exemple suivant a parfaitement fonctionné pour moi:

    <script type="text/javascript">
        var date = new Date("February 01, 2016 02:15:00"); //Month Days, Year HH:MM:SS
        var now = new Date();
        var diff = (date.getTime()/1000) - (now.getTime()/1000);

        var clock = $('.clock').FlipClock(diff,{
            clockFace: 'DailyCounter',
            countdown: true
        });
    </script>
5
Burgo855

Simple:

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date("August 15, 2015 03:24:00"),{
    clockFace: 'DailyCounter',
    countdown: true
    });  
</script>

OR

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2015,8,15),{
    clockFace: 'DailyCounter',
   countdown: true
   });  
</script>
4
coolshrimp

Vous devriez le faire quelque part comme ceci: 

$(document).ready(function(){
    var date = new Date(2014, 7, 21, 0,0,0,0);
    var today = new Date();

    var dif = date.getTime() - today.getTime();

    var timeLeft = Math.abs(dif/1000)/60;


    var clock = $('.clock').FlipClock({
        autoStart: false,
        clockFace: 'DailyCounter',
        countdown: true
    });

    clock.setTime(timeLeft);
    clock.start();   
});

La fonction de temps est un peu désactivée, vous devrez donc vous en servir pour bien faire les choses.

Fiddle: http://jsfiddle.net/Uscg9/4/

2
Adjit

Je pense que l'utilisation de la fonction api de Date sera meilleure ( référence )

$(document).ready(function() {
    // Today's date object.
    var today   = new Date();
    today   = today.getTime()/1000;

    // Final date object.
    var finalDate = new Date();

    // Setting year for final date.
    finalDate.setFullYear(2016);

    // Setting month for final date.
    // Month counting starts from 0 i.e. Jan = 0, therefore March = 2.
    finalDate.setMonth(2);

    // Setting Day for final date.
    finalDate.setDate(17);

    // Setting Hours for final date.
    finalDate.setHours(12);

    // Setting Minutes for final date.
    finalDate.setMinutes(00);

    // Setting Seconds for final date.
    finalDate.setSeconds(00);

    var finalDate  = finalDate.getTime()/1000;
    var diff  = finalDate - today;

    $('div#countdown-clock').FlipClock(diff, {
        clockFace: 'HourlyCounter',
        countdown: true
    }); 
});
1
garlicFrancium