php实现数字滚动效果,vue如何实现数字滚动增加效果？代码示例
項目中需要做數字滾動增加的效果，一開始很懵，研究了一下原理，發現很簡單，貼出來分享一下 ^_^
數字滾動組件：
0
props: {
time: {
type: Number,
default: 2
},
value: {
type: Number,
default: 720000
}
},
methods: {
numberGrow (ele) {
let _this = this
let step = (_this.value * 10) / (_this.time * 1000)
let current = 0
let start = 0
let t = setInterval(function () {
start += step
if (start > _this.value) {
clearInterval(t)
start = _this.value
t = null
}
if (current === start) {
return
}
current = start
ele.innerHTML = current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g, '$1,')
}, 10)
}
},
mounted () {
this.numberGrow(this.$refs.numberGrow)
}
}
transform: translateZ(0);
}
.number-grow {
font-family: Arial-BoldMT;
font-size: 64px;
color: #ffaf00;
letter-spacing: 2.67px;
margin:110px 0 20px;
display: block;
line-height:64px;
}
調用：
更多編程相關知識，請訪問：編程入門！！
總結
以上是生活随笔為你收集整理的php实现数字滚动效果,vue如何实现数字滚动增加效果？代码示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java x.length_Java中的
- 下一篇： java部署jar还是war优劣_详解S