compteur CSS

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 !