小tip:CSS计数器+伪类实现数值动态计算与呈现【转】
2024-09-03 02:45:19
【原文】http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/
一、CSS计数器为哪样?
要想理解本文内容,你需要首先了解什么是CSS计数器,您可以查看前不久我写的文章“CSS计数器(序列数字字符自动递增)详解”,相当地详尽与深入。
下面的动态行为全部由HTML与CSS触发,没有任何JavaScript的参与,不过使用诸多CSS3功能,因此只在现代浏览器中有效果。OK,放下手中的工作,一起来感受下CSS的潜力吧~
二、CSS计数器与动态计数呈现
您可以狠狠地点击这里:使用CSS计数器动态获得选中元素个数demo
demo中的复选框,你选中几个,就是告诉你对应选中的个数,如下截图,本人土鳖,只吃过3种:
CSS代码很简单,如下:
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
解释下就是,有个全局计数器icecream
,每有一个复选框选中,计数值就会加1
, .total
就是呈现选中个数的那个标签,其任务很简单,呈现当前计数器值就可以了。
三、CSS计数器与数值计算小游戏
您可以狠狠地点击这里:CSS计数器实现数值计算小游戏demo
默认进入看到是这样样子:
选择对应的计算值后面就会呈现对应的结果:
当最后计算的值是72
时候,就会反馈你成功了!
其实现主要借助CSS3选择器以及CSS计数器以及单复选框伪类技术。
CSS核心代码如下:
body {
counter-reset: sum;
} input {
position: absolute;
clip: rect(0 0 0 0);
} #number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; } .sum::before {
content: '= ' counter(sum);
} #number1:checked ~
#number2:checked ~
#number3:not(:checked) ~
#number4:not(:checked) ~
#number5:not(:checked) ~
#number6:checked ~
.sum::after {
content: ' (万岁!)';
}
其实原理跟上面的计算选中个数是一样的,不过这里呢,每个复选框计数值这里都是具体值(不是默认的1
),最后,通过相邻兄弟选择器以及:checked
状态判断最后结果是不是72
,还是挺巧妙的。
大家有兴趣可以多多斟酌斟酌。
参考文章
(本篇完)
最新文章
- TCP三次握手图解
- 使用git删除远程仓库文件
- You are note Hk
- JavaScript的Eval与JSON.parse的区别
- codeforces Round #263(div2) D. Appleman and Tree 树形dp
- Apache详细介绍 - [ Apache v2.4.10 for Windows ]
- 自定义PageControl样式
- PE文件结构详解(一)基本概念
- git 常用命令 创建查看删除分支,创建查看删除tag等
- 深入理解object C中复制对象的用法(二)
- C# ToString()和Convert.ToString()的区别
- ASPxGridView-单元格合并
- 由 System.arraycopy 引发的巩固:对象引用 与 对象 的区别
- 第十二节 JS事件高级应用
- react.css
- sitecore系统教程之内容创作入门
- AppStore 添加回复
- 26. The Greenhouse Effect and Its Consequences 温室效应及其后果
- 【BZOJ】【2730】【HNOI2012】矿场搭建
- MySQL的逻辑查询语句的执行顺序