Construisez vos propres comptoirs à l'aide de JavaScript et HTML

Nous devons également ajouter un ID spécial à chaque champ de texte que nous voulons devenir un compteur:

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

(L'attribut de nom est conservé dans le code pour assurer la compatibilité en arrière.)

La syntaxe de l'ID est la suivante:

(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

Au lieu de l'ID, nous pourrions utiliser un nom de classe ou un attribut sur mesure avec un espace de noms approprié. L'utilisation de l'ID nous permet cependant de reproduire cette même validation à l'arrière, par exemple en php.

Certains développeurs peuvent froncer les sourcils sur ce mélange de balisage et de logique métier, mais cela nous évite de devoir reproduire les règles du code JavaScript dans le script arrière.

le javascript automatiquement:

• vérifie que l'entrée est un nombre, un entier et dans la plage spécifiée
• Vérifie la valeur de l'élément de compteur lorsque la page est chargée
• vérifie et augmente la valeur lorsque le lien d'augmentation est cliqué
• vérifie et diminue la valeur lorsque le lien de diminution est cliqué
• vérifie la valeur une fois que l'utilisateur a saisi le texte et a quitté le champ

Si l'entrée n'est pas un nombre ou est inférieure à la valeur minimale autorisée, le script définit la valeur au minimum. Si l'entrée est supérieure au maximum, le script le définit au maximum.

Personnalisez le widget

Le contre-lien de classe est appliqué aux liens générés via cette solution. Les liens peuvent donc être personnalisés via CSS. Pour personnaliser le nom de classe et le texte du lien affiché, définissez les variables comme suit:

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

La variable addBefore définit l'emplacement de la liaison décroissante. Une valeur de vrai applique le lien avant le champ de texte. Une valeur de faux le définit après le champ de texte, à côté du lien croissant.

Inconvénients de la solution

C'est jusqu'à HTML, CSS et JavaScript peuvent nous emmener tout en restant indépendant de la souris. Les comptoirs réels permettent aux utilisateurs d'augmenter et de diminuer les valeurs via les touches du curseur et d'accélérer la vitesse de défilement, plus l'utilisateur maintient l'un ou l'autre bouton de flèche déprimé.

Il peut y avoir une solution qui permet cette fonctionnalité dans certains environnements de navigateur, mais il est douteux qu'il puisse être fait pour fonctionner dans tous les navigateurs modernes.

Questions fréquemment posées (FAQ) sur les contre-widgets en javascript et html

Comment puis-je créer un contre-widget à l'aide de JavaScript et HTML?

Création d'un compteur Widget à l'aide de JavaScript et HTML implique quelques étapes. Tout d'abord, vous devez créer un élément HTML où le compteur sera affiché. Cela peut être un élément div simple avec un ID unique. Ensuite, vous devez rédiger une fonction JavaScript qui incrémentera la valeur de compteur. Cette fonction peut être déclenchée par divers événements comme un bouton CLIC ou Page Charge. Enfin, vous devez mettre à jour l'élément HTML avec la nouvelle valeur de compteur à l'aide de la propriété InnerHTML de JavaScript.

Quelles sont les utilisations courantes des comptoirs?

Les comptoirs sont polyvalents et peuvent être utilisés de diverses manières sur un site Web. Ils peuvent être utilisés pour afficher le nombre de visiteurs sur un site, le nombre d'articles dans un panier, le compte à rebours d'un événement spécial ou la progression vers un objectif de collecte de fonds. Ils peuvent également être utilisés dans les jeux ou les quiz pour garder une trace des scores ou du temps.

Puis-je personnaliser l'apparence de mon compteur Widget?

Oui, vous pouvez personnaliser l'apparence de votre compteur Widget à l'aide de CSS. Vous pouvez modifier la police, la couleur, la taille et le fond du comptoir. Vous pouvez également ajouter des animations ou des transitions pour rendre le compteur plus attrayant visuellement.

Comment puis-je ajouter un contre-widget à mon site Web?

Pour ajouter un compteur de widget à votre site Web, vous devez inclure l'élément HTML et la fonction JavaScript dans le code de votre page Web. L'élément HTML doit être placé où vous voulez que le compteur apparaisse sur la page. La fonction JavaScript peut être incluse dans une balise de script dans la section Head de la page ou dans un fichier JavaScript externe.

Puis-je utiliser un compteur Widget sur un site Web statique?

Oui, vous pouvez utiliser un compteur de terrains sur un site Web statique. Étant donné que le compteur est implémenté à l'aide de JavaScript, il peut s'exécuter du côté client, ce qui signifie qu'il ne nécessite aucun traitement côté serveur. Cependant, gardez à l'esprit que la valeur du compteur ne sera pas persistante entre différentes sessions ou les utilisateurs.

Comment puis-je rendre mon compteur de widget réactif?

Pour rendre votre compteur de comptoir réactif, vous pouvez utiliser les requêtes CSS Media. Ceux-ci vous permettent d'appliquer différents styles en fonction de la taille de l'écran. Par exemple, vous pouvez rendre la taille de la police du compteur plus petit sur des écrans plus petits.

Puis-je utiliser un compteur widget sans javascript?

Bien que JavaScript soit couramment utilisé pour créer des comptoirs dynamiques, il est possible de créer un simple compteur widget sans JavaScript en utilisant HTML et CSS. Cependant, ce compteur ne sera pas dynamique et ne sera pas mis à jour en temps réel.

Comment puis-je tester mon compteur Widget?

Vous pouvez tester votre compteur Widget en exécutant votre page Web dans un navigateur Web. Vous devez vérifier si le compteur incréments correctement et s'il s'affiche correctement sur différentes tailles d'écran. Vous pouvez également utiliser des outils de développeur pour déboguer votre code JavaScript.

Puis-je utiliser un compteur préfabriqué?

Oui, il existe de nombreux comptoirs pré-préparés disponibles que vous pouvez utiliser. Ces widgets sont livrés avec leurs propres styles et fonctionnalités, et vous pouvez généralement les personnaliser en fonction de vos besoins. Cependant, gardez à l'esprit que l'utilisation d'un widget préfabriqué peut ne pas offrir autant de flexibilité que de créer le vôtre.

Comment puis-je rendre mon compteur de widget accessible?

Pour rendre votre contre-widget accessible, vous devez vous assurer qu'il est accessible au clavier et qu'il a un contraste approprié pour la visibilité. Vous devez également fournir un texte alternatif pour les lecteurs d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!