原生js实现数字滚动特效

html: 

js:

//调用
var test = new FuncBox({
	container: "#jjlin",
	speed: 30,
	count: 1000
});


//封装插件的代码，写的很糙请见谅 0_0
(function (win, doc) {
    let defaultsOption = {
        speed: 20,
        count: 100
    }

    function FuncBox(options) {
        let _own = this;
        if (!options) {
            throw new Error("请传入配置参数");
        }
        _own = Object.assign(_own, defaultsOption, options);
        _own.container = doc.querySelector(_own.container) || doc.querySelectorAll(self.container);
        _own.NumberControl();
    }

    FuncBox.prototype = {
        NumberControl: function () {
            let opts = this;
            let max = 100,
                count = opts["count"],
                speed = Math.floor(count / max),
                sum = 0,
                contariner = opts.container,
                running = 1,
                fool = opts["speed"];
            let timer = setInterval(function () {
                if (running <= max && speed != 0) {
                    contariner.innerText = (sum = speed * running);
                    running++;
                } else if (sum < count) {
                    contariner.innerText = (++sum);
                } else {
                    clearInterval(timer);
                }
            }, fool);
        }
    }

    win.FuncBox = FuncBox;
})(window, document)

前端wx交流群，群内有超级大佬，失效请加JJvae1,转载请标明出处蟹蟹