Created
June 30, 2017 15:40
-
-
Save ecmadao/b3e4df79f66a4da93d857c2e6beec1b0 to your computer and use it in GitHub Desktop.
js 数字滚动效果
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { | |
| elem, // 数字要变化的元素 | |
| endVal = 100, // 最终显示数字 | |
| startVal = 0, // 数字变化开始值 | |
| duration = 1500, // 变化持续时间 (ms) | |
| decimal = 0 // 小数点位数 | |
| } = options; | |
| let startTime = 0; | |
| const dec = Math.pow(10, decimal); | |
| let progress, value; | |
| const startCount = (timestamp) => { | |
| if(!startTime) startTime = timestamp; | |
| progress = timestamp - startTime; | |
| value = startVal + (endVal - startVal) * (progress / duration); | |
| value = (value > endVal) ? endVal : value; | |
| value = Math.floor(value * dec) / dec; | |
| // elem.innerHTML = value; | |
| elem.innerHTML = value.toFixed(decimal); | |
| progress < duration && requestAnimationFrame(startCount) | |
| }; | |
| requestAnimationFrame(startCount); | |
| }; |
Author
ecmadao
commented
Jun 30, 2017
- https://www.denpe.com/javascript-number-dynamic/
- https://codepen.io/jieli/pen/grGoxJ?css-preprocessor=none
- http://inorganik.github.io/countUp.js/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment