javascript / jquery Zeit herunterzählen

Question

Ich möchte eine Funktion entweder mit reinen Javascript oder auch profitieren von Jquery zu einer Endzeit wie Countdown zu machen:

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

und es sollte in html wie folgt angezeigt werden

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

In der Tat, und es wäre sogar noch toller, wenn es sich jede Sekunde aktualisieren könnte.

Ich bin sehr naiv mit Javascript und verwirrt, wie zu nähern, würde jede Hilfe zu schätzen wissen.

Answer 1

Sie könnten verwenden jQuery Countdown

Answer 2

Schauen Sie sich das hier an: http://keith-wood.name/countdown.html

Answer 3

Es kann in JavaScript ohne Plugins durchgeführt werden.

Sie müssen die aktuelle Datumszeit auf den Nenner bringen, der um eins kleiner ist als der angezeigte Wert. In Ihrem Beispiel würde das bedeuten, dass Sie alles auf Millisekunden herunterbrechen müssen.

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

Sie ermitteln dann die Differenz zwischen dem jetzigen und dem gewünschten Zeitpunkt. Diese wird Ihnen in Millisekunden angegeben.

var diff = endtime - currentTime;

Da dies in Millisekunden zurückgegeben wird, müssen Sie sie in Sekunden, Minuten, Stunden, Tage usw. umrechnen. Das bedeutet, dass man feststellen muss, wie viele Millisekunden in jedem Nenner enthalten sind. Dann können Sie mod und divide verwenden, um die für jede Einheit benötigte Zahl zu erhalten. Siehe unten.

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);

Sobald Sie die Nenner haben, die Sie anzeigen möchten, können Sie diese mit verschiedenen Methoden an die HTML-Seite zurückgeben. Zum Beispiel:

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

Damit ist Ihre Methode auf den Punkt gebracht. Um sie jedoch in einem bestimmten Intervall ablaufen zu lassen (weshalb Sie die HTML-Anzeige innerhalb der JavaScript-Funktion aktualisieren), müssen Sie die folgende Funktion aufrufen, wobei Sie Ihren Funktionsnamen und Ihr Intervall in Millisekunden angeben.

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);