下载鸥 > 网站下载 > 开发教程 > JS/JQuery

css3计数器函数counter()

106 2023-06-27 02:27:57

收藏
css3计数器函数counter(),用于统计并展示元素出现的次数。与li作用一样,但相较于li而言,好控制许多,且参数可以如普通的css一样 随意调整。
 

参考源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3 counter()函数</title> 
<style>
body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "老 " counter(section) ": "; /* 显示计数器 */
  font-size:12px;
  color:#999;
}
</style>
</head>
<body>

<h1>使用 CSS 计数器:</h1>
<h3>王大</h3>
<h3>王二</h3>
<h3>王三</h3>
<h3>王四</h3>

</body>
</html>

本文地址:https://xzo.com.cn/develop/js/1165.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 330
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 257
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 288
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 278
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 349
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1507
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 515
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 738
随机JS/JQuery开发教程
css变量函数 var()
css变量函数 var()

css变量函数 var主要用于通用功能,如通用字号、通用颜色、通用宽度高度等。...

0 113
jQuery监听数字输入并每隔4个数加一个空格
jQuery监听数字输入并每隔4个数加一个空格

最近发了许多jQuery监听的文章,今天讲讲jQuery监听数字输入并每隔4个数加一...

0 143
jquery实时监听input标签数字值的变化
jquery实时监听input标签数字值的变化

jQuery可以监听各种状态,今天我们简单介绍通过jQuery监听input录入状态与最...

0 95
使用jQuery控制2个按钮来回切换可点击效果
使用jQuery控制2个按钮来回切换可点击效果

我们可以通过jQuery实现市面上90%的交互效果,今天讲讲控制2个按钮来回切换可...

0 82
修改input属性placeholder颜色
修改input属性placeholder颜色

input默认的placeholder颜色是黑色,这个颜色是可以调整的。...

0 89
点击查看百度地图api
点击查看百度地图api

我们可以给网站开发百度地图,也可以通过点击直接跳转百度地图。从功能难易程...

0 99
CSS3弹性盒子常用属性介绍
CSS3弹性盒子常用属性介绍

弹性盒子是css3里面的新布局,其效果与float类似,但应用范围、视觉效果、对齐...

0 114
CSS3之弹性盒子布局flex(文字版)
CSS3之弹性盒子布局flex(文字版)

CSS3 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素...

0 86
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入