-
-
Save ihoey/3a7fdaafa17d06007cc5f18215933d7c 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); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment