le compteur css est css3, efficace uniquement dans les navigateurs modernes
counter-reset : définit la valeur du compteur pour le nombre d'occurrences d'un certain sélecteur. La valeur par défaut est 0. Définissez simplement un compteur, vous pouvez définir la valeur initiale, la valeur par défaut est 0
compteur-incrément : Réglez l'incrément du compteur à chaque fois qu'un sélecteur apparaît. L'incrément par défaut est 1.
démo
comptage des implémentations CSS et
css
body{
margin: 0;
counter-reset: increment;
}
input{
border: none;
margin: 0;
padding: 0;
}
.number1 input[type=checkbox]:checked{
counter-increment:increment 20;
}
.number2 input[type=checkbox]:checked{
counter-increment:increment 30;
}
.number3 input[type=checkbox]:checked{
counter-increment:increment 40;
}
.number4 input[type=checkbox]:checked{
counter-increment:increment 50;
}
.number5 input[type=checkbox]:checked{
counter-increment:increment 60;
}
.sum:after{
content: counter(increment);
}html
<label class="number1"><input type="checkbox">20</label>+<label class="number2"><input type="checkbox">30</label>+<label class="number3"><input type="checkbox">40</label>+<label class="number4"><input type="checkbox">50</label>+<label class="number5"><input type="checkbox">60</label>=<p class="sum"></p>
Pour plus d'articles sur les compteurs CSS, veuillez faire attention au site Web PHP chinois !
Solution au problème selon lequel le système Win7 ne peut pas démarrer
utilisation du curseur Oracle
Que signifie la liquidation ?
Utilisation de la fonction GAMMAINV
Quelles sont les technologies de collecte de données ?
Quels sont les logiciels bureautiques
Pourquoi l'imprimante n'imprime-t-elle pas ?
qu'est-ce que Hadoop
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
