vue 数字自增到某一值(多个标签内的数字)
//数字自增到某一值 动画参数(目标元素) *目标元素需要为jquery对象,不能为dom对象(data()是jquery的方法)*NumAutoPlusAnimation(targetEle) {//要显示的真实数值绑定在相应html元素的data-xxxx属性上吧var...
·
refresh(){
var tagList = $(this.$el).find('.cpNum');
for(var i= 0;i<tagList.length;i++){
this.NumAuto(tagList.eq(i))
}
//数字自增到某一值 动画参数(目标元素) *目标元素需要为jquery对象,不能为dom对象*
NumAuto(targetEle) {
//要显示的真实数值绑定在相应html元素的data-xxxx属性上吧
var time = 5000, //总时间--毫秒为单位
finalNum = targetEle.data('value'), //要显示的真实数值
regulator = 300, //调速器,调节数字改变的速度
step = finalNum / (time / regulator),/*每30ms增加的数值--*/
count = 0, //计数器
initial = 0;
var timer = setInterval(function() {
count = count + step;
if(count >= finalNum) {
clearInterval(timer);
count = finalNum;
}
//t未发生改变的话就直接返回
var t = Math.floor(count);
if(t == initial) return;
initial = t;
targetEle.html(initial);
// console.log('ada',$this,$this.innerHTML);
}, 30);
},
var tagList = $(this.$el).find('.cpNum');
for(var i= 0;i<tagList.length;i++){
this.NumAuto(tagList.eq(i))
}
//数字自增到某一值 动画参数(目标元素) *目标元素需要为jquery对象,不能为dom对象*
NumAuto(targetEle) {
//要显示的真实数值绑定在相应html元素的data-xxxx属性上吧
var time = 5000, //总时间--毫秒为单位
finalNum = targetEle.data('value'), //要显示的真实数值
regulator = 300, //调速器,调节数字改变的速度
step = finalNum / (time / regulator),/*每30ms增加的数值--*/
count = 0, //计数器
initial = 0;
var timer = setInterval(function() {
count = count + step;
if(count >= finalNum) {
clearInterval(timer);
count = finalNum;
}
//t未发生改变的话就直接返回
var t = Math.floor(count);
if(t == initial) return;
initial = t;
targetEle.html(initial);
// console.log('ada',$this,$this.innerHTML);
}, 30);
},
更多推荐
已为社区贡献1条内容
所有评论(0)