js realisiert digitale Veränderungen

Dieses Mal werde ich Ihnen js zur Umsetzung digitaler Veränderungen vorstellen. Was sind die Vorsichtsmaßnahmen für js zur Umsetzung digitaler Veränderungen?

 $.fn.countTo = function (options) {
 options = options || {};//当options未被初始化，即typeof options = 'undefined'时，执行后面部分即var 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,//返回html对象
  $self = $(this),//返回返回一个jquery对象
  loopCount = 0,
  value = settings.from,
  data = $self.data('countTo') || {};//获取jauery方法对象
  $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: 200,  // 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: 1, // 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);
 }
 // 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);
 }

Einfache Verwendung von „Bewerben“ und „Anrufen“, erfahren Sie den Link.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonjs realisiert digitale Veränderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!