js实现数字跳动到指定数字


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
JS定时关闭窗口的实例
May 22 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
js评分组件使用详解
Jun 06 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 #Javascript
node.js基础知识汇总
Aug 25 #Javascript
基于JS实现快速读取TXT文件
Aug 25 #Javascript
Vue实现简单的拖拽效果
Aug 25 #Javascript
浅谈JavaScript节流和防抖函数
Aug 25 #Javascript
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Python的函数的一些高阶特性
2015/04/27 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
医院竞聘演讲稿
2014/05/16 职场文书
2014年生产部工作总结
2014/12/17 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers