javascript - 使用 onclick 函数创建动画计数器

Question

我正在尝试插入像 this 这样的动画计数器在我的 html 页面中。我想要两个动画计数器。第一个始终可见并且工作正常。单击按钮后显示第二个动画计数器。当我单击按钮时第二个计数器出现，但它不起作用。这不算。您可以在以下代码段中看到我的意思和我的实现。如何让第二个计数器开始计数。

    function showanimation() {
    			document.getElementById("animation_counter").innerHTML = "<div class='wrapper'><div class='counter col_fourth'><h2 class='timer count-title count-number' data-to='50000' data-speed='3000'></h2><p class='count-text '>Data Sources</p></div></div>";
    		}
        
(function ($) {
    $.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);
   }
}(jQuery));

jQuery(function ($) {
    // custom formatting example
    $('.count-number').data('countToOptions', {
        formatter: function (value, options) {
    	     return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    	}
    });
    		  
// start all the timers
    $('.timer').each(count);  
    		  
    function count(options) {
    	var $this = $(this);
    	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    	$this.countTo(options);
    }
});

.col_fourth { width: 20%; }
		
		.col_fourth{
			position: relative;
			display:inline;
			display: inline-block;
			float: left;
			margin-right: 2%;
			margin-bottom: 5px;
		}

		.counter { background-color: #0088cc; padding: 20px 0; border-radius: 5px;}
		.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
		.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
		.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

<button onclick="showanimation()">Show animation</button>

<div id="animation_counter2"><div class='wrapper'><div class='counter col_fourth'><h2 class='timer count-title count-number' data-to='50000' data-speed='3000'></h2><p class='count-text '>Data Sources</p></div></div></div>

<div id="animation_counter"></div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

您需要在 showanimation() 时再次运行插件，方法是在您的 showanimation 上添加 $('#animation_counter .timer').countTo(); () 函数

function showanimation() {
document.getElementById("animation_counter").innerHTML = "<div class='wrapper'><div class='counter col_fourth'><h2 class='timer count-title count-number' data-to='50000' data-speed='3000'></h2><p class='count-text '>Data Sources</p></div></div>";
// start This timers
$('#animation_counter .timer').countTo();
}

(function ($) {
$.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);
}
}(jQuery));

jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});

// start all the timers
$('.timer').each(count);  

function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});

.col_fourth { width: 20%; }

.col_fourth{
  position: relative;
  display:inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 5px;
}

.counter { background-color: #0088cc; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

<button onclick="showanimation()">Show animation</button>

<div id="animation_counter2"><div class='wrapper'><div class='counter col_fourth'><h2 class='timer count-title count-number' data-to='50000' data-speed='3000'></h2><p class='count-text '>Data Sources</p></div></div></div>

<div id="animation_counter"></div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>