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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
详解webpack打包vue时提取css
May 26 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
js实现图片实时时钟
Jan 15 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue-router定义元信息meta操作
Dec 07 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 购物车实例(申精)
2009/05/11 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php如何连接sql server
2015/10/16 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
css3 transform属性详解
2014/09/30 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
保险专业大专生求职信
2013/10/26 职场文书
专科应届生求职信
2013/11/24 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
PL350与SW11的比较
2021/04/22 无线电