zoukankan      html  css  js  c++  java
  • 纯css实现计数器效果

    先上效果图:

    点击选项框,下面的数字动态显示总个数,该效果由纯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>

  • 相关阅读:
    基于Metaweblog API 接口一键发布到国内外主流博客平台
    uva144 Student Grants
    Uva 10452
    Uva 439 Knight Moves
    Uva 352 The Seasonal War
    switch语句
    java——基础知识
    我的lua学习2
    codeforces 431 D. Random Task 组合数学
    codeforces 285 D. Permutation Sum 状压 dfs打表
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4914930.html
Copyright © 2011-2022 走看看