ครั้งสุดท้ายที่ฉันพบผลกระทบของการบรรลุจำนวนการเติบโตในโครงการและบรรลุการเติบโตของจำนวนจาก 0 ถึงจำนวนเป้าหมาย มาดูไดอะแกรมเอฟเฟกต์
ตอนนี้ขยายเพื่อให้ได้เอฟเฟกต์ที่แตกต่างกัน
แนวคิดหลักคือสองส่วน
1. เพิ่มทุกสามหมายเลข
2. เคลื่อนไหว
สะดวกมากที่จะใช้เป็นประจำเพื่อดำเนินการให้เสร็จสมบูรณ์
this.fomatnum = ฟังก์ชั่น (num) {var str = num.tofixed (this.option.decimal); // แน่นอนว่ามีทศนิยมที่ 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) {ในขณะที่ (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; - เพื่อให้ได้เอฟเฟกต์รวมกันคุณสามารถใช้วิธี requestAnimationFrame จากนั้นประมวลผลความเข้ากันได้
var change = function () {var p = math.min (1.0, (วันที่ใหม่ (). getTime () - starttime)/that.option.duration); // เวลาปัจจุบันถูกลบออกจากเวลาเริ่มต้นแล้วหารด้วยเวลาทั้งหมด Math.min และตัวเลขทั้งสองใช้ค่าต่ำสุด var nums = that.num * p; That.elm.innerhtml = that.fomatnum (that.num * p); if (p <1.0) {// RequestAnimationFrame (ฟังก์ชัน () {change ();}); } else {cancelanimationFrame (เปลี่ยน); }} RequestAnimationFrame (function () {Change ();});หากคุณต้องการให้ได้ผลของตัวเลขการเคลื่อนไหวในพื้นที่ภาพคุณสามารถฟังได้ว่า DOM อยู่ในพื้นที่ภาพแล้วเรียกมันว่า
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ หากคุณมีคำถามใด ๆ โปรดฝากข้อความเพื่อพูดคุย ขอบคุณสำหรับการสนับสนุน Wulin.com