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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解angular2 控制视图的封装模式
Dec 27 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
php文件上传的简单实例
2013/10/19 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
不安全的常用的js写法
2009/09/15 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中反射用法实例
2015/03/27 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python处理大日志文件
2019/07/23 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
详解Python 中的容器 collections
2020/08/17 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
金智子午JAVA面试题
2015/09/04 面试题
运动会获奖感言
2014/02/11 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015元旦节寄语
2014/12/08 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python