Javascript fügt Minuten zu neuem Datum hinzu ();bevor Sie das Objekt verwenden

Question

Ich habe Funktionsaufrufe, die eine Reihe von Timern starten, und ich möchte jedem ein paar Minuten hinzufügen, damit nicht alle bei Null beginnen.Ich hatte Erfolg mit:

var currentDate = new Date();
var twentyMinutesLater = new Date(currentDate.getTime() + (20 * 60 * 1000));
new CountUp(twentyMinutesLater, 'counter03');

Ich würde gerne die Erstellung des var zwanzigMinutesLater überspringen und so weiter. Für alle Timer, die ich möchte, kann ich die Syntax einfach nicht richtig verstehen, oder vielleicht ist es nicht möglich.Gibt es eine Möglichkeit, die im folgenden Funktionsaufruf angegebenen Millisekunden hinzuzufügen.

new CountUp(new Date(), 'counter03');

Ich habe versucht:

new CountUp((new Date() + (20 * 60 * 1000)), 'counter03');

Ergebnis NaN NaN: NaN: NaN, also keine Zahl Gleiches Ergebnis mit doppelten Anführungszeichen.

Gibt es Javascript-Syntax-Master, die irgendwelche Ideen haben?

Answer 1

In Ihrem spezifischen Code übergeben Sie ein Date-Objekt an den Zählercode, und das wird nicht erwartet.Es wird ein Zeitwert erwartet, aus dem ein eigenes Datumsobjekt erstellt wird (dies können Sie direkt im Konstruktor für die Zählerfunktion sehen).Außerdem wird der Zählercode in Zukunft nicht mehr lange dauern, sondern nur in der Vergangenheit (vielleicht, weil er sich nicht mit negativen Zeiten befassen möchte - ich weiß nicht).

Hier ist ein funktionierendes Beispiel hier , in dem ich meine andere in der Antwort verwendete jsFiddle geändert habezu Ihrer anderen Frage.

function addCounter() {
    var currentDate = new Date();
    var twentyMinutesLater = currentDate.getTime() - (20 * 60 * 1000);
    var div = document.createElement("div");
    div.id = "counter" + counterNum++;
    document.body.appendChild(div);
    new CountUp(twentyMinutesLater, div.id);
}

Und hier ist eine jsFiddle, mit der Sie eine Anzahl von Minuten eingeben können und die einen Zähler mit diesem Wert startet: http://jsfiddle.net/jfriend00/vnf5z/ .

Answer 2

So etwas sollte folgendermaßen funktionieren:

var d = new Date();
new CountUp(d.setMinutes(d.getMinutes() + 20), 'counter03'); 

Abhängig davon, wie der CountUp-Konstruktor das an ihn übergebene Datumsobjekt verwendet und ob Sie d wiederverwenden möchten, benötigen Sie möglicherweise:

var d = new Date();
new CountUp(new Date(d.setMinutes(d.getMinutes() + 20)), 'counter03'); 

, sodass jeder Aufruf von CountUp ein anderes Datumsobjekt erhält.

Answer 3

Nur ein weiterer Ansatz, den ich in Rails gesehen habe.Mit dieser Syntax würden Sie relative Datumsobjekte erstellen

(20).minutes().fromNow()

Wenn Sie das Rauschen in Klammern hassen, können Sie dies tun (nur in ES5-kompatiblen Browsern).

(20).minutes.fromNow

Hier ist die erste Nicht-ES5-Lösung, die Methoden für den Number-Prototyp hinzufügt.

Number.prototype.minutes = function() {
    // minutes to milliseconds
    return this * 60 * 1000;
};

Number.prototype.fromNow = function() {
    var futureDate = new Date(Date.now() + this);
    return futureDate;
};

new CountUp((20).minutes().fromNow(), 'foo')

Hier ist die ES5-Lösung, die funktionsgestützte Eigenschaften hinzufügt.

Object.defineProperties(Number.prototype, {
    minutes: {
        get: function() {
            // minutes to milliseconds
            return this * 60 * 1000;
        }
    },
    fromNow: {
        get: function() {
            var futureDate = new Date(Date.now() + this);
            return futureDate;
        }
    }
});

new CountUp((20).minutes.fromNow, 'foo')

Es gibt verschiedene Denkrichtungen zur Erweiterung einheimischer Objekte.Eine Gruppe verbietet es um jeden Preis, während die andere dazu ermutigt, es fast überall zu verwenden.Wie bei allem ist es wichtig, ein Gleichgewicht zu finden.

Answer 4

new Date () gibt ein Objekt zurück, das nicht der Zeitstempel ist. Daher sollten Sie dort keine mathematische Operation verwenden (zumindest keine Addition, wenn Sie eine Zahl als Ergebnis erwarten). Verwenden Sie Date.getTime ():

//when you need a Date-object as argument
  new CountUp(new Date(new Date().getTime() + (20 * 60 * 1000)) , 'counter03');
//when you need the timestamp as argument
  new CountUp((new Date().getTime() + (20 * 60 * 1000)) , 'counter03');

Sehen Sie sich die Geige an, um den Unterschied zu erkennen: http://jsfiddle.net/doktormolle/8v4Tx/