使用countup.js让数字动起来

最新推荐文章于 2024-05-11 10:47:19 发布

学而时习之不亦说乎。

最新推荐文章于 2024-05-11 10:47:19 发布

阅读量410

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/boundle_ss/article/details/122582265

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

直接使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字动起来</title>
    <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
</head>
<style>
    h1 {
        text-align: center;
        cursor: pointer;
    }

    #box {
        width: 300px;
        height: 300px;
        margin: 200px auto;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        font-family: songti
    }
</style>

<body>
    <h1 onclick="dong()">点击动起来</h1>
    <div id="box">
        <p id="money1">50000</p>
        <p id="money2">100000</p>
        <p id="money3">20000</p>
    </div>
    <script>
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            prefix: '前者',
            suffix: '后者'
        };
        var money1 = new CountUp('money1', 0, 50000, 2, 1, options),
            money2 = new CountUp('money2', 0, 100000, 0, 1, options),
            money3 = new CountUp('money3', 0, 20000);

            money1.start();
            money2.start();
            money3.start();
        function dong() {
            location.reload();
        }
    /**
         * param1: target(dom对象或者一个能获取到dom的字符串，也叫目标对象) *必须
         * param2: startVal（动画起始的值如24.02）*必选
         * param3: endVal (动画结束的值如94.62) *必选
         * param4: decimals(指定小数位数，默认为0，既没有小数) *可选
         * param5:  duration(整个动画运动的总时间，默认为2s) *可选
         * param6: options(用来修改默认的配置项) *可选
         **/
    // 默认的配置项
    // options = {
    //   useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
    //   useGrouping: true, // 对数字进行分组，如12345，按三位一组变为类似123,45这样的
    //   separator: ',', // 分组时使用的分隔符默认是逗号，
    //   decimal: '.', // 小数点
    //   easingFn: easeOutExpo, // 缓动动画的函数
    //   formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
    //   prefix: '', // 添加前缀如12345，变为￥12345
    //   suffix: '', // 添加后缀如12345 通过添加后缀变为12345$，12345元之类的
    //   numerals: [] // 用来做替换操作，一般用不到，默认为空就是不用他
    // };
    </script>
</body>

</html>

学而时习之不亦说乎。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用countup.js让数字动起来

直接使用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>数字动起来
复制链接

扫一扫