多平台统一管理软件接口,如何实现多平台统一管理软件接口
416
2023-01-26
vue 实现数字滚动增加效果的实例代码
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,http://贴出来分享一下 ^_^
数字滚动组件:
0
export default {
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) {
ENFBmhp return
}
current = start
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
}, 10)
}
},
mounted () {
this.numberGrow(this.$refs.numberGrow)
}
}
.number-grow-warp{
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;
}
调用:
总结
以上所述是给大家介绍的vue 实现数字滚动增加效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~