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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
js中new一个对象的过程
Feb 20 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
用JS实现飞机大战小游戏
Jun 09 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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JS实现的A*寻路算法详解
2018/12/14 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
express启用https使用小记
2019/05/21 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
平面设计岗位职责
2013/12/14 职场文书
挂职思想汇报
2013/12/31 职场文书
《值日生》教学反思
2014/02/17 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
优秀党支部申报材料
2014/12/24 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android