Question

Je veux faire une fonction soit en utilisant pur Javascript ou encore profiter de jquery compter jusqu'à une heure de fin, comme:

//consumes a javascript date object
function countDown(endtimme){
...
}

et il doit afficher en html comme

<div id="time_left_box">
    <h1>Time remaining</h1>:

    <p>hours left: ..remaining day will be here## <p>
    <p>minutes left: ##remaining day will be here## <p>
    <p>seconds left: ##remaining day will be here## <p>
</div>

En effet, et il serait encore plus grande si elle peut se rafraîchir à chaque seconde.

Je suis très naïf avec javascript et confus sur la façon d'aborder, toute aide serait apprécier.

Était-ce utile?

La solution

Vous pouvez utiliser jQuery Compte à rebours

Autres conseils

Jetez un oeil à celui-ci: http://keith-wood.name/countdown.html

Il peut être fait en JavaScript sans plug-ins.

Vous devez obtenir le temps de date, jusqu'au dénominateur qui est un plus petit que ce que vous affichez. Avec votre exemple, cela voudrait dire que vous avez besoin pour obtenir tout bas en millisecondes.

var currentTime = new Date(n.getFullYear(), n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

Vous trouverez alors la différence entre maintenant et le moment souhaité. Cela vous est donné en millisecondes.

var diff = endtime - currentTime;

Parce que cela est retourné en millisecondes, vous devez les convertir en secondes, minutes, heures, jours, etc ... Cela signifie l'établissement du nombre de millisecondes sont dans chaque dénominateur. Ensuite, vous pouvez utiliser mod et diviser pour retourner le nombre nécessaire pour chaque unité. Voir ci-dessous.

var miliseconds = 1;
var seconds = miliseconds * 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

//Getting the date time in terms of units
//Floored so that they go together (to get just year/days/hours etc.. by themselves you need to use Math.round(diff/desired unit);
var numYears = Math.floor(diff / years);
var numDays = Math.floor((diff % years) / days);
var numHours = Math.floor((diff % days) / hours);
var numMinutes = Math.floor((diff % hours) / minutes);
var numSeconds = Math.round((diff % minutes) / seconds);

Une fois que vous avez les dénominateurs que vous souhaitez afficher, vous pouvez retourner ce à la page html par différentes méthodes. Par exemple:

document.getElementById("tyears").innerHTML = numYears;

Voilà qui résume votre méthode. Cependant, pour le faire fonctionner sur un intervalle de jeu (ce qui est la raison pour laquelle vous mettez à jour l'affichage HTML dans la fonction JavaScript) vous devez appeler la fonction suivante, en donnant le nom de votre fonction et indiquez votre intervalle en millisecondes.

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top