JS 自定义实现数字滚动处理

陈琦鹏

已于 2022-09-13 10:42:16 修改

阅读量1.2k

点赞数

文章标签： javascript 前端 servlet

于 2022-08-08 11:37:00 首次发布

本文链接：https://blog.csdn.net/m0_56164131/article/details/126224545

版权

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../src/qlCountUp.js"></script>
    <style>
        #num {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
 
<body>
    <div id="num"></div>
    <div id="num2"></div>
    <script>
        var timeStart,
            timeEnd;
        new qlCountUp({
            el: '#num',
            count: 111,
            onStart: function () {
                timeStart = new Date();
            },
            onEnd: function () {
                timeEnd = new Date();
                var span = timeEnd - timeStart;
                //秒钟
                console.info(span / 1000);
            }
        });
 
        new qlCountUp({
            el: '#num2',
            count: 99999
        });
    </script>
</body>
</html>

coungup.js 源码：

 
/**
 * 计数器封装
 * 特点：滚动显示数字展示，固定展示间隔，滚动时间随着数字增大而增加
 * el:'',---页面元素选择器
 * count:1000--展示的数字大小
 * speed:20 ---展示单位数字的毫秒数
 * onStart:function----滚动开始事件
 * onEnd:function ---滚动结束事件
 */
 
(function (win, doc) {
 
    var defaultOptions = {
        el: '',//当前展示的组件的筛选器
        count: 1000,
        speed: 10,
        onStart: function () { },
        onEnd: function () { }
    }
 
    function countUp(options) {
        var _this = this;
        if (!options)
            throw new Error("请配置计算参数");
 
        _this = Object.assign(_this, defaultOptions, options);
        _this.element = doc.querySelector(_this.el) || doc.querySelectorAll(_this.el);
        if (!_this.element)
            throw new Error("获取dom元素失败");
 
        //计算处理
        _this.countAdd();
    }
 
    countUp.prototype = {
        //按指定速度计算并展示
        countAdd: function () {
            var _this = this;
            //初始化单位数字
            var element = _this.element;
            var max = 100, //最大步数
                count = _this["count"],
                speed = Math.floor(count / max),
                sum = 0,//计算累计总和
                running = 1;
            //滚动开始
            _this.onStart();
            var timer = setInterval(() => {
                if (running <= max && speed != 0) {
                    sum = speed * running;
                    element.innerText = sum;
                    running++;
                }
                else if (sum < count) {
                    sum++;
                    element.innerText = sum;
                }
                else {
                    clearInterval(timer);
                    //滚动结束
                    _this.onEnd();
                }
 
            }, _this.speed);
        }
    }
 
    win.qlCountUp = countUp;
})(window, document);

展示效果：