Last time I encountered the effect of achieving the number growth in the project and achieving the growth of the number from 0 to the target number. Let’s take a look at the effect diagram
Now expand it to achieve different effects
The main ideas are two parts
1. Add every three numbers,
2. Get moving
It is very convenient to use regular to complete the process
this.fomatNum = function(num) { var str = num.toFixed(this.option.decimal);//Exactly how many decimal places 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; } } To achieve the combined effect, you can use requestAnimationFrame method and then process the compatibility.
var change = function() { var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//The current time is subtracted from the start time, and then divided by the total time, Math.min, and the two numbers take the minimum value. 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(); });If you want to achieve the effect of moving numbers in the visual area, you can listen to whether the dom is in the visual area and then call it.
The above is the entire content of this article. If you have any questions, please leave a message to discuss. Thank you for your support to Wulin.com.