码迷,mamicode.com
首页 > Web开发 > 详细

纯css实现计数器效果

时间:2015-10-27 19:57:43      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

先上效果图:

技术分享

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

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

1 html{
2     counter-reset:section;
3 }
4 input:checked{
5     counter-increment:section;
6 }
7 .counter:after{
8   
以下菜系,你喜欢哪些?
<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>

技术分享

纯css实现计数器效果

标签:

原文地址:http://www.cnblogs.com/liuhanz/p/4914930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!