<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .number {
        font-size: 50px;
        color: palegreen;
    }
</style>

<body>
    <div class="number" data-target="5000"></div>
    <div class="number" data-target="1236"></div>
    <div class="number" data-target="6666"></div>
</body>
<script>
    // 获取所有的dom,querySelectorAll为为数组
    const numbers = document.querySelectorAll('.number')
    console.log("🚀 ~ file: css数字从0到指定数值.html:23 ~ numbers:", numbers)
    numbers.forEach(counter => {
        counter.innerText = 0;
        const upDateNumber = () => {
            // 获取每个类名为number的data-target,即获取最大值 
            const target = Number(counter.getAttribute('data-target'))

            // 获取当前div的数值
            const d = Number(counter.innerText)

            // 设置数据增加的值，可以通过target除的数值确定怎么加数值的快慢
            const increment = target / 200

            // 当数字小于最大值时，执行下面的操作
            if (d < target) {
                // 向上取整
                counter.innerText = `${Math.ceil(d + increment)}`
                // 1ms重新调用，不然它会在第一次运行完就结束
                setTimeout(upDateNumber, 1)
            } else {
                counter.innerText = target
            }
        }
        upDateNumber()
    })
</script>

</html>

 

# css # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区