js实现数字跳动到指定数字
更新时间：2020年08月25日 10:46:26 作者：#麻辣小龙虾#
这篇文章主要为大家详细介绍了js实现数字跳动到指定数字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现数字跳动到指定数字的具体代码，供大家参考，具体内容如下
运行结果如下：
<!DOCTYPE html>
<head>
<title>js实现数字跳动到指定数字</title>
<style>
h1 {font-size: 150px;text-align:center;}
p {text-align:center;}
button {font-size:40px;}
</style>
</head>
<body>
<h1 id="number">0</h1>
<p>
<button onclick="start()">开始计数</button>
</p>
</body>
<script>
/*
* startNum 代表要跳动的初始数字
* targetNum 代表要跳动到的数字
* time 代表要跳动需要花费的时间
* selector 代表要跳动元素的选择器
*/
const $setJumpNumber = (startNum, targetNum, time = 1, selector) => {
let dom = document.querySelector(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);
};
function start () {
$setJumpNumber(11, 218983423, 1, 'h1');
};
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JS实现简单的图书馆享元模式,以一个图书馆存书借书的例子分析了图书馆享元模式的实现技巧,需要的朋友可以参考下2015-06-06
本文重点给大家介绍js判断json对象是否为空的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-07-07
javascript提取URL的搜索字符串中的参数(自定义函数实现)
我们经常会看到有的页面链接地址后面会跟有参数,很多时候我们需要获得这些参数的值,接下来将介绍获取方法,感兴趣的朋友可以了解系,希望本文对你有所帮助2013-01-01
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时，效率问题必须重视。下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
这篇文章主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下2016-05-05
这篇文章给大家介绍了Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件），感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
javascript HTML5 canvas实现打砖块游戏
这篇文章主要介绍了基于javascript HTML5 canvas实现打砖块游戏的具体实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
在javascript前端开发中js函数问题经常会被讨论，这个问题仁者见仁智者见智，下面通过示例代码给大家介绍js五大常见函数，感兴趣的朋友一起看看吧2018-03-03
主页面A 怎么向 iframe B 传递数据呢？iframe B 怎么向 主页面A 传递数据，下面有不错的实现思路，感兴趣的朋友可以了解下2013-12-12
document.selection.createRange方法与实例
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象2006-10-10
最新评论