Erstellen Sie Ihre eigenen Zähler -Widgets mit JavaScript und HTML

Wir müssen auch jedem Textfeld eine spezielle ID hinzufügen, die wir zu einem Zähler werden möchten:

<input type="text" size="3" name="passengers_ctr_1_12" value="1">

(Das Namensattribut wird im Code aufbewahrt, um die Rückwärtskompatibilität zu gewährleisten.)

Die Syntax der ID lautet wie folgt:

(any name)_ctr_(minimum value)_(maximum value) <br>
foo_ctr_0_10 <br>
Allows integer values between 0 and 10 for foo <br>
bar_ctr_-10_10 <br>
Allows integer values between -10 and 10 for bar <br>
baz_ctr_1_999 <br>
Allows integer values between 1 and 999 for baz

Anstelle der ID könnten wir einen Klassennamen oder ein maßgeschneidertes Attribut mit einem ordnungsgemäßen Namespace verwenden. Mit der ID können wir jedoch dieselbe Validierung am hinteren Ende replizieren, beispielsweise in Php.

Einige Entwickler sind möglicherweise die Stirn bei dieser Mischung von Markup- und Geschäftslogik, aber es speichert uns davor, die Regeln aus dem JavaScript -Code im Back -End -Skript zu replizieren.

Das JavaScript automatisch:

• prüft, ob der Eintrag eine Zahl, eine Ganzzahl und innerhalb des angegebenen Bereichs
ist
• überprüft den Wert des Zählerelements, wenn die Seite geladen wird
• prüft und erhöht den Wert, wenn der Anstiegslink klickt
• prüft und verringert den Wert, wenn der Link zur Abnahme von
klickt.
• überprüft den Wert, sobald der Benutzer den Text eingegeben und das Feld
verlassen hat

Wenn der Eintrag entweder keine Zahl ist oder unter dem zulässigen Mindestwert liegt, legt das Skript den Wert auf das Minimum fest. Wenn der Eintrag über dem Maximum liegt, setzt das Skript es auf das Maximum.

passen Sie das Widget

an

Die Klasse Gegenlink wird auf die durch diese Lösung erzeugten Links angewendet. Die Links können daher über CSS angepasst werden. Um den Klassennamen und den angezeigten Link -Text anzupassen, legen Sie die Variablen wie folgt fest:

var linkclass='counterlink'; <br>
var addtext='+'; <br>
var subtext='-'; <br>
var addbefore=true;

Die Variable addBefore definiert den Ort der abnehmenden Verbindung. Ein Wert von True wendet den Link vor dem Textfeld an. Ein Wert von False definiert es nach dem Textfeld neben dem zunehmenden Link.

Nachteile der Lösung

Dies ist so weit wie HTML, CSS und JavaScript, während wir mit Mausunabhängigen bleiben. Real Counter -Widgets ermöglichen es den Benutzern, die Werte über die Cursorschlüssel zu erhöhen und zu verringern und die Bildlaufgeschwindigkeit zu beschleunigen, je länger der Benutzer die beiden Pfeiltaste deprimiert.

kann eine Lösung geben, die diese Funktionalität in bestimmten Browserumgebungen ermöglicht, aber es ist zweifelhaft, dass sie über alle modernen Browser hinweg arbeiten kann.

häufig gestellte Fragen (FAQs) zu Gegenwidgets in JavaScript und HTML

Wie kann ich ein Zähler -Widget mit JavaScript und HTML erstellen? Zunächst müssen Sie ein HTML -Element erstellen, in dem der Zähler angezeigt wird. Dies kann ein einfaches Div -Element mit einer eindeutigen ID sein. Als nächstes müssen Sie eine JavaScript -Funktion schreiben, die den Zählerwert erhöht. Diese Funktion kann durch verschiedene Ereignisse wie eine Schaltfläche Klicken oder Seiten geladen werden. Schließlich müssen Sie das HTML -Element mit dem neuen Zählerwert mithilfe der InnerHTML -Eigenschaft von JavaScript aktualisieren. Sie können verwendet werden, um die Anzahl der Besucher auf einer Website, die Anzahl der Artikel in einem Einkaufswagen, den Countdown für ein besonderes Ereignis oder die Fortschritte in Richtung eines Spendenziels anzuzeigen. Sie können auch in Spielen oder Tests verwendet werden, um die Ergebnisse oder die Zeit zu verfolgen.

Kann ich das Aussehen meines Zähler -Widgets anpassen? Sie können die Schriftart, Farbe, Größe und Hintergrund des Zählers ändern. Sie können auch Animationen oder Übergänge hinzufügen, um den Zähler visuell ansprechender zu gestalten.

Wie kann ich meiner Website ein Zähler -Widget hinzufügen? Das HTML -Element sollte platziert werden, wo der Zähler auf der Seite angezeigt wird. Die JavaScript -Funktion kann in einem Skript -Tag im Kopfabschnitt der Seite oder in einer externen JavaScript -Datei aufgenommen werden.

Kann ich ein Zähler -Widget auf einer statischen Website verwenden? Da der Zähler mit JavaScript implementiert wird, kann er auf der Clientseite ausgeführt werden, was bedeutet, dass keine serverseitige Verarbeitung erforderlich ist. Beachten Sie jedoch, dass der Zählerwert in verschiedenen Sitzungen oder Benutzern nicht anhaltend sein wird. Mit diesen können Sie je nach Bildschirmgröße verschiedene Stile anwenden. Sie können beispielsweise die Schriftgröße des Zählers auf kleineren Bildschirmen kleiner machen.

Kann ich ein Zähler -Widget ohne JavaScript verwenden? Dieser Zähler ist jedoch nicht dynamisch und wird in Echtzeit nicht aktualisiert.

Wie kann ich mein Zähler -Widget testen?

Sie können Ihr Counter -Widget testen, indem Sie Ihre Webseite in einem Webbrowser ausführen. Sie sollten prüfen, ob der Zähler korrekt auferlegt wird und ob er in verschiedenen Bildschirmgrößen korrekt angezeigt wird. Sie können auch Entwickler-Tools verwenden, um Ihren JavaScript-Code zu debuggen.

Kann ich ein vorgefertigtes Zähler-Widget verwenden? Diese Widgets sind mit ihren eigenen Stilen und Funktionen ausgestattet, und Sie können sie normalerweise so anpassen, dass Sie Ihren Anforderungen entsprechen. Beachten Sie jedoch, dass die Verwendung eines vorgefertigten Widgets möglicherweise nicht so viel Flexibilität bietet wie das Erstellen eines eigenen.

Wie kann ich mein Zähler-Widget zugänglich machen? Sie sollten auch alternativen Text für Bildschirmleser bereitstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigenen Zähler -Widgets mit JavaScript und HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!