Rumah hujung hadapan web tutorial js js实现简单数字变动效果

js实现简单数字变动效果

Dec 09, 2017 pm 01:34 PM
javascript Kesan

本文主要为大家详细介绍了js实现数字变动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

 $.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);
 }
Salin selepas log masuk

相关推荐:

10行js代码实现上下滚动公告效果方法

JS实现的ajax和同源策略详解

JS如何实现移动端整屏滑动

Atas ialah kandungan terperinci js实现简单数字变动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Apr 03, 2024 am 08:13 AM

Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih

Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Mar 28, 2024 am 11:11 AM

Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara

Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Apr 17, 2024 pm 05:07 PM

Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos

Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Mar 28, 2024 pm 03:20 PM

Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat

Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik Mar 06, 2024 pm 04:40 PM

Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik

Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Apr 23, 2024 am 08:04 AM

Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.

Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR Mar 28, 2024 pm 02:54 PM

Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP

See all articles