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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue+moment实现倒计时效果
Aug 26 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
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
浅谈PHP中的
2016/04/23 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Z-Blog中用到的js代码
2007/03/15 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python set集合类型操作总结
2014/11/07 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
生产总经理岗位职责
2013/12/19 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
教师节活动总结
2014/08/29 职场文书
学生通报表扬范文
2015/05/04 职场文书
在人间读书笔记
2015/06/30 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
服务器间如何实现文件共享
2022/05/20 Servers