La dernière fois, j'ai rencontré l'effet de l'atteinte de la croissance du nombre dans le projet et de la croissance du nombre de 0 au nombre cible. Jetons un coup d'œil au schéma d'effet
Maintenant, développez-le pour obtenir différents effets
Les idées principales sont deux parties
1. Ajouter tous les trois nombres,
2. Déplacer
Il est très pratique d'utiliser régulièrement pour terminer le processus
this.fomatnum = fonction (num) {var str = num.tofixed (this.option.decimal); // exactement combien de places décimales 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' + "," + "22"); }} if (this.option.isfomat) {return this.option.prefix + x1 + x2; } else {return this.option.prefix + str; }} Pour réaliser l'effet combiné, vous pouvez utiliser requestAnimationFrame , puis traiter la compatibilité.
var change = function () {var p = math.min (1.0, (new Date (). getTime () - that.starttime) / that.option.duration); // L'heure actuelle est soustraite de l'heure de début, puis divisée par le temps total, Math.Min, et les deux nombres prennent la valeur minimale. var nums = that.num * p; that.elm.innerhtml = that.fomatnum (that.num * p); if (p <1.0) {// requestanimationFrame (function () {change ();}); } else {CanceLanimationFrame (change); }} requestAnimationFrame (function () {change ();});Si vous souhaitez réaliser l'effet du déplacement des nombres dans la zone visuelle, vous pouvez écouter si le DOM est dans la zone visuelle et ensuite l'appeler.
Ce qui précède est l'intégralité du contenu de cet article. Si vous avez des questions, veuillez laisser un message à discuter. Merci pour votre soutien à wulin.com.