网站首页HTML/CSS
使用countUp.js实现数字变化动画效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
<span id="target"></span>
<script type="module">
    // 仓库：https://github.com/inorganik/countUp.js

    import {CountUp} from './static/js/countUp.min.js';

    window.onload = function () {
        let countUp = new CountUp(
            'target', // 目标元素ID
            9527, // 目标值
            {
                startVal: 1024, // 起始值
                decimalPlaces: 2, // 保留小数点后几位
                duration: 3, // 动画持续时间，单位为秒
                useGrouping: true, // 是否使用千分位，即从个位数起每三位之间加一个半角逗号
            }
        );

        if (!countUp.error) {
            countUp.start();
        } else {
            console.error(countUp.error);
        }
    }
</script>
</body>
</html>