https://mgl-led.com/template/default/js/numRoll.js?v=20210125172530

1function numRoll() {
2
3    $.fn.countTo = function (options) {
4        options = options || {};
5
6        return $(this).each(function () {
7            // set options for current element
8            var settings = $.extend({}, $.fn.countTo.defaults, {
9                from: $(this).data('from'),
10                to: $(this).data('to'),
11                speed: $(this).data('speed'),
12                refreshInterval: $(this).data('refresh-interval'),
13                decimals: $(this).data('decimals')
14            }, options);
15
16            // how many times to update the value, and how much to increment the value on each update
17            var loops = Math.ceil(settings.speed / settings.refreshInterval),
18                increment = (settings.to - settings.from) / loops;
19
20            // references & variables that will change with each update
21            var self = this,
22                $self = $(this),
23                loopCount = 0,
24                value = settings.from,
25                data = $self.data('countTo') || {};
26
27            $self.data('countTo', data);
28
29            // if an existing interval can be found, clear it first
30            if (data.interval) {
31                clearInterval(data.interval);
32            }
33            data.interval = setInterval(updateTimer, settings.refreshInterval);
34
35            // initialize the element with the starting value
36            render(value);
37
38            function updateTimer() {
39                value += increment;
40                loopCount++;
41
42                render(value);
43

44                if (typeof(settings.onUpdate) == 'function') {
45                    settings.onUpdate.call(self, value);
46                }
47
48                if (loopCount >= loops) {
49                    // remove the interval
50                    $self.removeData('countTo');
51                    clearInterval(data.interval);
52                    value = settings.to;
53
54                    if (typeof(settings.onComplete) == 'function') {
55                        settings.onComplete.call(self, value);
56                    }
57                }
58            }
59
60            function render(value) {
61                var formattedValue = settings.formatter.call(self, value, settings);
62                $self.html(formattedValue);
63            }
64        });
65    };
66
67    $.fn.countTo.defaults = {
68        from: 0,               // the number the element should start at
69        to: 0,                 // the number the element should end at
70        speed: 1000,           // how long it should take to count between the target numbers
71        refreshInterval: 100,  // how often the element should be updated
72        decimals: 0,           // the number of decimal places to show
73        formatter: formatter,  // handler for formatting the value before rendering
74        onUpdate: null,        // callback method for every time the element is updated
75        onComplete: null       // callback method for when the element finishes updating
76    };
77
78
79    function formatter(value, settings) {
80        return value.toFixed(settings.decimals);
81    }
82
83
84    // custom formatting example
85    // $('.timer').data('countToOptions', {
86    //     formatter: function (value, options) {
87    //         return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
88    //     }
89    // });
90
91    // start all the timers
92    $('.timer').each(count);
93
94
95    function count(options) {
96        var $this = $(this);
97        options = $.extend({}, options || {}, $this.data('countToOptions') || {});
98        $this.countTo(options);
99    }
100
101
102}
103
104var flag = false;
105var scroll = $('.timer').offset().top-window.innerHeight;
106
107//  触发时间
108$(window).scroll(function () {
109    var height = $(window).scrollTop();
110    if (height >= scroll && false === flag) {
111        flag = true;
112        numRoll();
113    }
114    if (height < scroll) {
115        flag = false;
116    }
117});
118