Glattere Zahlenübergabe mit Kilometerzähler

Eine der Möglichkeiten, eine Präsentation numerischer Informationen interessanter zu gestalten, besteht darin , eine Übergangsanimation hinzuzufügen . Das Erstellen einer Übergangsanimation kann mit Javascript durchgeführt werden, aber die Codierung wird sehr lange dauern. Für eine schnellere Alternative, versuchen Sie Odometer.

Odometer ist ein Javascript-Plugin, das Ihnen helfen kann , Ihre numerischen Informationen mit fließenden Übergängen und coolen Themen attraktiver zu machen . Es ist einfach einzurichten und wird von vielen aktuellen Browsern unterstützt.

Implementierung

Odometer ist ein eigenständiges Javascript-Plugin . Sie müssen nur die js-Datei und ihr Thema auf Ihrer Seite mit dem folgenden Code einschließen:

Sie sind fertig! Jetzt wird jedes Element, das Sie in die odometer, in einen Kilometerzähler umgewandelt.

In diesem Beispiel verwende ich ein autoähnliches Tachometer-Thema. Odometer kommt mit sechs anderen verschiedenen Themen, nämlich die Standard-Thema, Digital, Minimal, Plaza, Spielautomat und Bahnhof Themen. Sie können zur Demo-Seite gehen, um sie in Aktion zu sehen.

Um den Wert zu aktualisieren, können Sie entweder natives JavaScript oder einen jQuery-Code verwenden. Rufen Sie zuerst die Funktion setTimeout und definieren Sie dann den aktualisierten Wert wie im folgenden Codeausschnitt:

Oder Sie können ein jQuery-Formular wie folgt verwenden:

 setTimeout (Funktion () {$ ('. Odometer'). html (5555);}, 1000); 

Der Wert 1000 im Code bedeutet, dass der Aktualisierungsprozess eine Sekunde nach dem vollständigen Laden der Seite ausgeführt wird.

Fügen Sie dann einem beliebigen Element eine odometer, zum Beispiel:

3252

Und der Wert von 3252 wird dann mit einem kühlen Übergang zu 5555 geändert (wie zuvor definiert).

Optionen

Für erweiterte Funktionen bietet Odometer einige Optionen zum Anpassen. Dies ist nützlich, wenn die Standardeinstellung nicht zu Ihnen passt. Um Optionen festlegen zu können, erstellen Sie zunächst ein odometerOptions Objekt wie folgt:

Die format wirkt sich auf die Zahlenformatierungsregel aus, z. B. das Anzeigen eines Dezimalpunkts vor bestimmten Ziffern. (ddd) bedeutet, dass in der Zahl kein Dezimalpunkt vorhanden ist. Und für andere Optionen, sehen Sie sich die folgende Liste an:

 window.odometerOptions = {auto: false, // Initiiere nicht automatisch alles mit dem 'Odometer' der Klasse 'selector:' .my-numbers ', // Ändere den Selektor, der benutzt wird, um automatisch Dinge zu finden, die animiert werden sollen:' (, ddd ) .dd ', // Ändere, wie Zifferngruppen formatiert werden und wie viele Ziffern nach der Dezimaltrennzeichen-Dauer angezeigt werden: 3000, // Ändere, wie lange das Javascript von der CSS-Animation erwartet:' Auto ', // Angeben Das Theme (wenn Sie mehr als eine Theme-CSS-Datei auf der Seite haben) animation: 'count' // Count ist eine einfachere Animationsmethode, die den Wert nur erhöht, // wenn Sie etwas Subtileres suchen. }; 

Fazit

Für diejenigen, die oft numerische Informationen präsentieren und es auffälliger machen möchten, ist Odometer eine gute Wahl. Beachten Sie, dass das Plugin nicht funktioniert, wenn Sie etwas anderes als eine Zahl eingeben . Wie auch immer, versuchen Sie es und lassen Sie uns wissen, was Sie denken!

5 nützliche Smartphone-Gadgets unter $ 20

Während das Smartphone selbst ein sehr nützliches Gerät ist, gibt es einige Gadgets und Zubehör, die Ihr Smartphone noch intelligenter machen können.Für diesen Artikel habe ich fünf Smartphone-Gadgets aufgeführt, die möglicherweise für Sie nützlich sein könnten, je nachdem, wie Sie sie verwenden. Und da ein

(Tech- und Design-Tipps)

30 ästhetisch gefällig iPhone Spiele, die Sie spielen sollten

Wenn Sie ein Smartphone besitzen, haben Sie wahrscheinlich ein Lieblingsspiel, das Sie verwenden, um Zeit in Warteschlangen zu verbringen oder während Sie pendeln. Es könnte ein Indie-Spiel sein, das die Mainstream-Konkurrenz wegbläst, oder ein minimalistisches Spiel mit einfachem Gameplay und Regeln. I

(Tech- und Design-Tipps)