zoukankan      html  css  js  c++  java
  • css计数器

    css 计数器是css3,只在现代浏览器中有效果
    counter-reset:设置某个选择器出现次数的计数器的值。默认为 0。 就是定义一个计数器,可以定义初始值,默认是0

    counter-increment:设置某个选取器每次出现的计数器增量。默认增量是 1。

    demo

    css 实现计数和

    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>=
    <div class="sum"></div>
  • 相关阅读:
    生成按月递增循环日期
    js判断上传图片宽高及文件大小
    网页上如何实现禁止复制粘贴以及如何破解
    PAT(乙级)1019
    PAT(乙级)1018
    PAT(乙级)1017
    PAT(乙级)1016
    PAT(乙级)1015
    关于PAT(乙级)
    PAT(乙级)1014
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6372863.html
Copyright © 2011-2022 走看看