写点什么

CSS 实现数据统计

用户头像
学习委员
关注
发布于: 2021 年 01 月 28 日
CSS实现数据统计

使用 CSS 也能给后台提交信息。


这个方法算是很取巧的,有点像向后台请求一个图片 url,每请求一次,后台就累计一次。


这里所要用到的是 CSS 伪类 :active


:active 伪类可以用于设置元素激活状态的样式。意思就是通过点击鼠标主键(或者其他输入设备,比如触控笔、笔记本的触摸板、甚至是一些触摸屏等)触发。


通过 CSS 可以请求资源的能力,反过来向后端传递数据,不过这种能力是很有限的。

<button class="button-1">按钮</button><button class="button-2">按钮</button>
<style> .button-1:active::after { content: url(xxx?action=click&imgId=btn1); display: none; } .button-2:active::after { content: url(xxx?action=click&imgId=btn2); display: none; }</style>
复制代码


此时每点击一次按钮,就会提交一次数据给服务器。

这种上报数据的方式,就算把 JS 禁用掉也没办法阻止的(旧版 IE 就要用户手动开启 JS)。


用户头像

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

评论

发布
暂无评论
CSS实现数据统计