纯css实现计数器效果

先上效果图：

点击选项框，下面的数字动态显示总个数，该效果由纯css实现。怎么实现的呢？主要就是靠css中的计数器counter。

css的counter-reset属性可以设置一个计数器，并通过counter-increment属性实现递增效果。具体可以看代码：

html{
    counter-reset:section;
}
input:checked{
    counter-increment:section;
}
.counter:after{
  

以下菜系，你喜欢哪些？
<ol>
    <li><input type="checkbox"><label for="food1">鲁菜</label></li>
    <li><input type="checkbox"><label for="food2">川菜</label></li>
    <li><input type="checkbox"><label for="food3">粤菜</label></li>
    <li><input type="checkbox"><label for="food4">苏菜</label></li>
    <li><input type="checkbox"><label for="food5">浙菜</label></li>
    <li><input type="checkbox"><label for="food6">闽菜</label></li>
    <li><input type="checkbox"><label for="food7">湘菜</label></li>
    <li><input type="checkbox"><label for="food8">徽菜</label></li>
</ol>
共选择了<b class="counter"></b>种菜系

counter-reset也可以设置多个counter来进行不同的计数。例如，常见的文章标题的层级：第1章 1.1节 1.2节... ...等

html{
    counter-reset:section;
}
h1{
    counter-reset: subsection;
}
h1:before{
    counter-increment: section;
    content: "Section"counter(section) ".";
}
h2:before{
    counter-increment: subsection;
    content: "Subsection" counter(section) "."counter(subsection)".";
}

<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>

效果：

 

甚至，我们可以控制一次counter-increment增加的数字。

html{
    counter-reset:sum;
}
input {
  position: absolute;
  clip: rect(0 0 0 0);  
}
.number{
    display: inline-block;
    width: 50px;
    height:50px;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    color:#0867B3;
    background: #eee;
}
input:checked+label{
    color:#fff;
    background: #0867B3;
}
#number1:checked{
    counter-increment: sum 2;
}
#number2:checked{
    counter-increment: sum 17;
}
#number3:checked{
    counter-increment: sum -6;
}
#number4:checked{
    counter-increment: sum +11;
}
#number5:checked{
    counter-increment: sum -19;
}
#number6:checked{
    counter-increment: sum -3;
}
strong:before{
    content: "="counter(sum)
}

<input type="checkbox" id="number1"><label class="number" for="number1">+2</label>
<input type="checkbox" id="number2"><label class="number" for="number2">+17</label>
<input type="checkbox" id="number3"><label class="number" for="number3">-6</label>
<input type="checkbox" id="number4"><label class="number" for="number4">+11</label>
<input type="checkbox" id="number5"><label class="number" for="number5">-19</label>
<input type="checkbox" id="number6"><label class="number" for="number6">-3</label>
<strong class="number"></strong>