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插件简单实现代码
Apr 19 Javascript
jquery实现动态画圆
Dec 04 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
基于postman获取动态数据过程详解
2020/09/08 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
数据库面试要点基本概念
2013/10/31 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
毕业论文评语大全
2014/04/29 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
成本会计岗位职责
2015/02/03 职场文书
运动会运动员赞词
2015/07/22 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis