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

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

使用示例：

 

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

展示效果：

 

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

展示效果如下：

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

 

 

更多：

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

js网页中实现复制功能，clipboard.js

 JS实现网页选取截屏 保存+打印 功能(转)