我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
实现思路
- 大体看上去是不停的渲染dom的
innerText - 那怎样
不停渲染呢？递归吗？ - 递归理论上是可以的，但是如果是递归的话，会发现，数字
嗖的一下就变成目标数字了 - 是的，递归的话，同步计算速度太快了
- 中间加
sleep呢？也是没问题的，通过promise与递归结合实现应该也是ok的 - 那
sleep的目的其实就是为了延缓递归速度太快，那其实还是有一个方法 - 将
innerText的0与target的num之间分为200份，然后通过settimeout与递归来实现 - 这样既可以保证不同大小的target的数字块变化时间一样，也有一个变化的过程可以明显看到
- 还有一个问题，怎样保存target呢？通过一个
visibility:hidden来隐藏一个包含target num的div吗？ - 这个也可以，当然也可以通过
dataset的方式，或者自定义属性 - 我这里用的是
data-target - 其他需要注意的点就没有了
具体实现
基础html结构
<body>
<div class="counter-container">
<i class="fab fa-twitter fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>Twitter Followers</span>
</div>
<div class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>YouTube Subscribers</span>
</div>
<div class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Fans</span>
</div>
<script src="script.js"></script>
</body>
主要是保证一个html的静态页面即可
基础css
css就不写了，都是基础的，没有特别需要注意的地方
唯一值得关注的就是其中的自定义unicode图标字体了，感兴趣的同学可以自己查一下
关键js
const counters = document.querySelectorAll('.counter')
counters.forEach(counter => {
counter.innerText = '0'
const updateCounter = () => {
const target = +counter.getAttribute('data-target')
const c = +counter.innerText
// const increment = target / 2000
const increment = target / 200
if (c < target) {
counter.innerText = `${Math.ceil(c + increment)}`
const timer = setTimeout(() => {
clearTimeout(timer)
updateCounter()
}, 1)
// updateCounter()
} else {
counter.innerText = target
}
}
updateCounter()
})
完整代码
总结
- 大体思路很简单，主要是需要用到类似
sleep的方法让dom内容变化别那么快 - 然后需要注意下不同数字跨度变化的时间段要一致
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
