machen Sie eine live-Takt mit der vorhandenen Zeit in div mit javascript

ok, angenommen, wir haben eine website, die eine Echtzeit-Zeit;

Beispiel :

<div id="updatetime">21:12:52</div>

jede Sekunden update Stunden:m:Sekunde.

was ich in Gedanken mit der interval function zu tun, lange pool und fügen Sie den sec - +1 wenn 60 dann fügen Sie + 1 zu m und gleichen Stunden. aber gibt es eine Funktion bereits, dieses problem zu lösen?

wie machen Sie das 21:12:52 einer bewegenden real-Uhr mit javascript, dass updates jede Sekunden?

ich habe eine Suche auf google, stackoverflow, viele von Ihnen erzählt uns, wie man die aktuellen real time datetime von javascript. aber keiner aus einem vorhandenen Zeit. wenn es ist, bitte setzen Sie den link.

Was meinst du einen vorhandenen Zeit?
21:12:52(time) 21:12:53 jede Sekunden, fügen Sie die Zeit, um die div
Werfen Sie einen Blick auf diese TimeSpan-Klasse: codeproject.com/Articles/62852/...
vorhandene Zeit bedeutet, was auch immer eingestellt ist, auf dem computer des Benutzers?
vorhandene Zeit bedeutet das, was immer ist auf den div, sorry für die ambiguty, ich möchte das div, um eine live-Uhr

InformationsquelleAutor Adam Ramadhan | 2012-06-07

javascript

Es kann so einfach wie diese:

setInterval(function(){
    document.getElementById("updatetime").innerHTML = (new Date()).toLocaleTimeString();
}, 1000);

Oder verwenden Sie die anderen modernen Methoden zur Feineinstellung der Ausgabe.

Update

Ich erst jetzt erkannt, dass die OP wurde gefragt, nicht über die Inkrementierung einer Komponente mit der aktuellen Zeit, aber mit einem vorgegebenen Zeit.

Das ist weniger trivial, aber hier ist eine Lösung, die passen sollten die ursprüngliche Frage:

function increment_time_element(element, delay) {
    var interval, last,
        time_pattern = /(\d+):(\d+):(\d+)/,
        start = element.innerHTML.match(time_pattern),
        then = new Date;

    then.setHours  (parseInt(start[1], 10) || 0);
    then.setMinutes(parseInt(start[2], 10) || 0);
    then.setSeconds(parseInt(start[3], 10) || 0);

    function now() {
        return Date.now ? Date.now() : (new Date).getTime();
    }

    last = now();

    interval = setInterval(function () {
        var current = now();
        //correct for any interval drift by using actual difference
        then.setTime(then.getTime() + current - last)
        last = current;
        element.innerHTML = then.toString().match(time_pattern)[0];
    }, delay || 1000);

    return {cancel: function() { clearInterval(interval) }};
}

//Usage:
var incrementing_time =
    increment_time_element(document.getElementById("updatetime"));

//Then, if you want to cancel:
incrementing_time.cancel();

new date(time) vielleicht?
Ohne Argumente, die Date-Konstruktor gibt die aktuelle Datum/Uhrzeit. toLocaleTimeString() gibt so etwas wie "09:00:43" oder "09:00:43 UHR".
Werden Sie sich bewusst, dass toLocaleString verhält sich unterschiedlich, abhängig von Betriebssystem und Benutzer-Einstellungen, also, wenn es zwingend notwendig die Anzeige der Uhrzeit im format 'hh:mm:ss', kann es nicht verwendet werden, weil es keine Garantie.

InformationsquelleAutor Steve

Wenn Sie nicht brauchen, eine sehr hohe treue, die Sie verwenden können, auf diese Weise:

var container  = document.getElementById("updatetime").firstChild;
var values = container.nodeValue.split(":");

//Because there is only a datetime specified, I assume is the current date
var now = new Date();
var time = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
                    values[0], values[1], values[2]).getTime();

setInterval(function() {
    time += 1000;
    var date = new Date(time);
    var values = [date.getHours(), date.getMinutes(), date.getSeconds()];

    for (var i = 0; i < 3; i++)
        if (values[i] < 10)
            values[i] = "0" + values[i];

    container.nodeValue = values.join(":");
}, 1000);

Wenn Sie möchten, um mehr im Einklang mit der aktuellen computer-Uhr, dann schlage ich vor, Sie zu verwenden setTimeout und passen Sie die delay argument mit der richtigen verstrichene Zeit.

Update: aufgrund der Kommentare, scheint es, die Elemente zu aktualisieren, nicht nur einem und mehreren, und der code ist mit jQuery. Hier ein Ansatz, dass arbeitet für mehrere Elemente mit class Sie zu identifizieren:

var containers  = $(".updatetime");
var times = [];
var now = new Date();

containers.each(function(index, node) {
    var values = $(node).text().split(":");

    times[index] = new Date(
        now.getFullYear(), now.getMonth(), now.getDate(),
        values[0], values[1], values[2]).getTime();
});

setInterval(function() {
    containers.each(function(index, node) {
        times[index] += 1000;

        var date = new Date(times[index]);
        var values = [date.getHours(), date.getMinutes(), date.getSeconds()];

        for (var i = 0; i < 3; i++)
            if (values[i] < 10)
                values[i] = "0" + values[i];

        $(node).text(values.join(":"));
    });

}, 1000);

funktioniert Super!, das einzige problem, dass es nicht " alle aktualisieren die ids. updatetime.
die id muss eindeutig sein, das ist, warum heißt "id": identifizieren eines bestimmten Elements. Es gibt ein Attribut mit dem Namen name, wo kann der gleiche Wert zuordnen, auf mehrere Elemente, aber es gilt nicht für div. Mein Vorschlag ist mit der class Attribut, so haben Sie <div class='updatetime'>. Dann können Sie querySelectorAll wo unterstützt, oder indem Sie auf eine Bibliothek wie Sizzle oder jQuery wo nicht, und Griff ein array von "container" - Objekte statt nur einem.
im mit jquery, heres, was ive getan, pastebin.com/NCehgm7P irgendwie ist es die Arbeit mit der ganzen Klasse, aber Sie sind alle das gleiche Wert.
Das ist, weil Sie müssen, nehmen Sie in account mehrere Container, daher gruppiert verschiedene Werte, und time. Können Sie noch eine haben setInterval, aber Sie haben, um eine Schleife, um alle Container. In meinem obigen code, es bedeutet zumindest, dass container und time Variablen zu arrays (Sie können weiterhin verwenden Sie eine values in einer Schleife, konvertieren Sie die Zeichenfolge in datetime).

InformationsquelleAutor ZER0

2

Wenn Ihr nach einer Echtzeit-Uhr, die tickt entlang, werfen Sie einen Blick auf den code, den ich verwendet habe ich ein "flip clock".
Aufgeteilt ich jede Ziffer in ein separates einzelne Ziffer für Grafik-Platzierung innerhalb der Uhr, aber wenn Sie es zerlegen haben Sie nur text-updates.

Javascript-Flip Clock

link funktioniert nicht. Ich habe ein weiteres Flip Clock: flipclockjs.com

InformationsquelleAutor Marc

können Sie es mit folgenden code

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  //add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

InformationsquelleAutor Sandip Moradiya

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.