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

- 日理万妓 2023-01-08 08:20 208阅读 0赞

**一、浏览器端js自定义实现数字滚动**

使用示例：

<!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);

展示效果：

![20210119160102531.gif][]

**二、小程序端js自定义实现数字滚动**

**展示效果如下：**

![2021011915580821.gif][]

小程序端代码没有公开，如果需要代码或者演示示例的技术，[点击找客服领取][Link 1]。

## [Echarts 开源，免费商用图表控件使用整理][Echarts] ##

## [js网页中实现复制功能，clipboard.js][js_clipboard.js] ##

## [ JS实现网页选取截屏 保存+打印 功能(转)][JS_ _] ##

[20210119160102531.gif]: /images/20221119/200a78fd727f4c01b72b41c82ca133a4.png
[2021011915580821.gif]: /images/20221119/5e9f6f81c4cd46f8bfe7c2bd95e34e32.png
[Link 1]: http://www.jnqianle.cn/
[Echarts]: https://blog.csdn.net/u011127019/article/details/111404485
[js_clipboard.js]: https://blog.csdn.net/u011127019/article/details/106588055
[JS_ _]: https://blog.csdn.net/u011127019/article/details/106382192