数字变大动画效果-js
没有废话-先上代码
(一个简单的定时器+一个简单的函数)
样式
<style>
.warp {
text-align: center;
margin-top: 100px
}
.label {
font-size: 20px;
padding: 10px 15px;
border: 1px solid #dedede;
width:230px;
}
</style>
HTML
<div class="warp">
<label for="num-auto" class="label">
数字:
<span id="numValue" data-time="1500" data-num="309887" data-rate="100" style="color:cadetblue;">0</span>
</label>
</div>
JS
<script>
function numAutoPlus (targetEle, options) {
options = options || {}
// 获取dom元素
let $this = document.getElementById(targetEle)
// 动画时长(毫秒数)
// 也可以将需要的参数写在dom上如:[data-XXX]
let time = options.time || $this.getAttribute('data-time')
// 最终要显示的数字
let finalNum = options.num || $this.getAttribute('data-time')
// 调节器(毫秒数) 改变数字增加速度
let rate = options.rate || $this.getAttribute('data-rate')
// 步长
let step = finalNum / (time / rate)
// 计数器
let count = 0
// 初始值
let initNum = 0
// 定时器
let timer = setInterval(function() {
count = count + step
if (count >= finalNum) {
clearInterval(timer)
count = finalNum
}
// t未发生改变的话就直接返回
// 减少dom操作 提高DOM性能
let t = Math.floor(count)
if(t === initNum) return
initNum = t
$this.innerHTML = initNum
}, 30)
}
numAutoPlus('numValue', {
time: 2000,
num: 98938383832,
rate: 40
})
</script>