Terakhir kali saya menemukan efek mencapai pertumbuhan jumlah dalam proyek dan mencapai pertumbuhan angka dari 0 ke angka target. Mari kita lihat diagram efeknya
Sekarang kembangkan untuk mencapai efek yang berbeda
Gagasan utamanya adalah dua bagian
1. Tambahkan setiap tiga angka,
2. Bergerak
Sangat nyaman untuk menggunakan reguler untuk menyelesaikan prosesnya
this.fomatnum = function (num) {var str = num.tofixed (this.option.decimal); // tepat berapa banyak tempat desimal var num1, x1, x2, reg; arr = str.split ("."); x1 = arr [0]; x2 = arr.length> 1? '.' + arr [1]: ""; reg =/(/d+) (/d {3})/; if (this.option.isfomat) {while (reg.test (x1)) {x1 = x1.replace (reg, '$ 1' + "," + "$ 2"); }} if (this.option.isfomat) {return this.option.prefix + x1 + x2; } else {return this.option.prefix + str; }} Untuk mencapai efek gabungan, Anda dapat menggunakan metode requestAnimationFrame dan kemudian memproses kompatibilitas.
var change = function () {var p = math.min (1.0, (new date (). getTime () - that.starttime)/that.option.duration); // Waktu saat ini dikurangi dari waktu mulai, dan kemudian dibagi dengan total waktu, Math.min, dan dua angka mengambil nilai minimum. var nums = that.num * p; itu.elm.innerHtml = that.fomatnum (that.num * p); if (p <1.0) {// requestAnimationFrame (function () {ubah ();}); } else {cancelanimationFrame (ubah); }} requestAnimationFrame (function () {ubah ();});Jika Anda ingin mencapai efek bergerak angka di area visual, Anda dapat mendengarkan apakah DOM berada di area visual dan kemudian menyebutnya.
Di atas adalah seluruh konten artikel ini. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan untuk didiskusikan. Terima kasih atas dukungan Anda ke wulin.com.