La última vez que encontré el efecto de lograr el crecimiento del número en el proyecto y lograr el crecimiento del número de 0 al número objetivo. Echemos un vistazo al diagrama de efectos
Ahora expandirlo para lograr diferentes efectos
Las ideas principales son dos partes
1. Agregue cada tres números,
2. Muévete
Es muy conveniente usar regularmente para completar el proceso.
this.fomatnum = function (num) {var str = num.tofixed (this.option.decimal); // exactamente cuántos lugares decimales 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; }} Para lograr el efecto combinado, puede usar requestAnimationFrame y luego procesar la compatibilidad.
var change = function () {var p = math.min (1.0, (nueva fecha (). gettime () - that.starttime)/that.option.duration); // La hora actual se resta desde la hora de inicio y luego se divide por el tiempo total, la math.min y los dos números toman el valor mínimo. var nums = that.num * p; eso.elm.innerhtml = that.fomatnum (that.num * p); if (p <1.0) {// requestAnimationFrame (function () {change ();}); } else {cancelAnimationFrame (cambio); }} requestAnimationFrame (function () {cambie ();});Si desea lograr el efecto de los números en movimiento en el área visual, puede escuchar si el DOM está en el área visual y luego llamarlo.
Lo anterior es todo el contenido de este artículo. Si tiene alguna pregunta, deje un mensaje para discutir. Gracias por su apoyo a Wulin.com.