jumpNumber(startNum, targetNum, time = 1, selector) {
let dom = document.getElementById(selector);
let originNum = startNum;
let stepNum = 0;
let timeNum = time;
dom.innerHTML = startNum;
let timeId = setInterval(() => {
if (originNum < targetNum) {
timeNum -= 0.001;
let strNum = originNum.toString(); // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字,所有后三位数随机跳动的方式进行模拟生成
if (targetNum.toString().length < 6) {
stepNum += 1; // 这样才可以实现越跳越快的效果
originNum = originNum + stepNum;
dom.innerHTML = originNum;
} else {
stepNum += 500; // 这样才可以实现越跳越快的效果
originNum = originNum + stepNum;
dom.innerHTML =
strNum.substr(0, strNum.length - 3) +
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10);
}
} else {
dom.innerHTML = targetNum;
clearInterval(timeId);
}
}, timeNum);
},
//引用
this.jumpNumber(0, row.marginLimit, 1, "marginLimits");
//页面
<span
v-if="quota.marginLimit >= 0"
class="green-text"
id="marginLimits"
>{{ quota.marginLimit.toLocaleString() }}</span
>
js实现数字跳动到指定数字
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1、先上图 2、技术代码(复制粘贴,直接使用) 3、使用this.jumpNumber(0, 128.456, 50)
- 去年年初,一个学长说他曾经遇到的面试题(现在不可能这么简单啦),现在发现好简单jquery真香~ Design: ...
- chrome下文字渐变效果 实现的关键代码如下,网上都有,不贴实现原理了: 实现countup.js文字跳动效果 ...
- String 字符串对象 在之前的学习中已经使用字符串对象了,定义字符串的方法就是直接赋值。比如: 定义mystr...