前端数字上涨动画特效

Posted 2020-10-03 AiTing on the way

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端数字上涨动画特效相关的知识，希望对你有一定的参考价值。

最近项目要用这样的效果，就从网上找了个插件，效果还不错

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery动态数字翻滚计数到指定数字的文字特效代码</title>
</head>

<body>
  <p class="timer count-title" id="count-number" data-to="111" data-speed="1500"></p>
  
  
  <script src=‘jquery.min.js‘></script>
  <script>
          $("#count-number").attr(‘data-to‘,898989)
      
      
          $.fn.countTo = function (options) {
            options = options || {};
            
            return $(this).each(function () {
                // set options for current element
                var settings = $.extend({}, $.fn.countTo.defaults, {
                    from:            $(this).data(‘from‘),
                    to:              $(this).data(‘to‘),
                    speed:           $(this).data(‘speed‘),
                    refreshInterval: $(this).data(‘refresh-interval‘),
                    decimals:        $(this).data(‘decimals‘)
                }, options);
                
                // how many times to update the value, and how much to increment the value on each update
                var loops = Math.ceil(settings.speed / settings.refreshInterval),
                    increment = (settings.to - settings.from) / loops;
                
                // references & variables that will change with each update
                var self = this,
                    $self = $(this),
                    loopCount = 0,
                    value = settings.from,
                    data = $self.data(‘countTo‘) || {};
                
                $self.data(‘countTo‘, data);
                
                // if an existing interval can be found, clear it first
                if (data.interval) {
                    clearInterval(data.interval);
                }
                data.interval = setInterval(updateTimer, settings.refreshInterval);
                
                // initialize the element with the starting value
                render(value);
                
                function updateTimer() {
                    value += increment;
                    loopCount++;
                    
                    render(value);
                    
                    if (typeof(settings.onUpdate) == ‘function‘) {
                        settings.onUpdate.call(self, value);
                    }
                    
                    if (loopCount >= loops) {
                        // remove the interval
                        $self.removeData(‘countTo‘);
                        clearInterval(data.interval);
                        value = settings.to;
                        
                        if (typeof(settings.onComplete) == ‘function‘) {
                            settings.onComplete.call(self, value);
                        }
                    }
                }
                
                function render(value) {
                    var formattedValue = settings.formatter.call(self, value, settings);
                    $self.html(formattedValue);
                }
            });
        };
        
        
        $.fn.countTo.defaults = {
            from: 0,               // the number the element should start at
            to: 0,                 // the number the element should end at
            speed: 1000,           // how long it should take to count between the target numbers
            refreshInterval: 100,  // how often the element should be updated
            decimals: 0,           // the number of decimal places to show
            formatter: formatter,  // handler for formatting the value before rendering
            onUpdate: null,        // callback method for every time the element is updated
            onComplete: null       // callback method for when the element finishes updating
        };
        
        function formatter(value, settings) {
            return value.toFixed(settings.decimals);
        }
    
    
    
      // 自定义格式化示例
//      $(‘#count-number‘).data(‘countToOptions‘, {
//        formatter: function (value, options) {
//          return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ‘,‘);
//        }
//      });
      
      // 开始所有的计时器
      $(‘.timer‘).each(count);  
      
      function count(options) {
        var $this = $(this);
        options = $.extend({}, options || {}, $this.data(‘countToOptions‘) || {});
        $this.countTo(options);
      }
  </script>
  <!--<script src="js/index.js"></script>-->
</body>

</html>

以上是关于前端数字上涨动画特效的主要内容，如果未能解决你的问题，请参考以下文章

10个JavaScript代码片段，使你更加容易前端开发。

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

使用嵌套片段和动画对象