آخر مرة واجهت تأثير تحقيق نمو الأرقام في المشروع وتحقيق نمو الرقم من 0 إلى الرقم المستهدف. دعونا نلقي نظرة على مخطط التأثير
الآن قم بتوسيعه لتحقيق تأثيرات مختلفة
الأفكار الرئيسية هي جزأين
1. أضف كل ثلاثة أرقام ،
2. الحصول على تتحرك
من المريح للغاية استخدام منتظم لإكمال العملية
this.fomatnum = function (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 ؛ } آخر {return this.option.prefix + str ؛ }} لتحقيق التأثير المشترك ، يمكنك استخدام طريقة requestAnimationFrame ثم معالجة التوافق.
var change = function () {var p = math.min (1.0 ، (تاريخ جديد (). getTime () - that.startTime)/that.option.duration) ؛ // يتم طرح الوقت الحالي من وقت البدء ، ثم مقسومًا على الوقت الإجمالي ، Math.min ، والرقمين يأخذان الحد الأدنى من القيمة. var nums = that.num * p ؛ that.elm.innerhtml = that.fomatnum (that.num * p) ؛ if (p <1.0) {// requestAnimationFrame (function () {change () ؛}) ؛ } آخر {cancelAnimationFrame (change) ؛ }} requestAnimationFrame (function () {change () ؛}) ؛إذا كنت ترغب في تحقيق تأثير نقل الأرقام في المنطقة المرئية ، فيمكنك الاستماع إلى ما إذا كانت DOM في المنطقة المرئية ثم تسميها.
ما سبق هو المحتوى الكامل لهذه المقالة. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لمناقشة. شكرا لك على دعمك إلى wulin.com.