热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现数字从零慢慢增加到指定数字示例

今天小编就为大家分享一篇js实现数字从零慢慢增加到指定数字示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近的学习项目中需要一个数字从0慢慢增加到指定数字,然后想了好久才做出来。一开始是想用循环做,循环里面用delay(),但是发现不太好用(可能是我不会用),然后想用循环里面套setTimeout,后来发现不行,一番百度之后发现setTimeout是异步的,等setTimeout的时候数字自增已经执行了n遍,完全不出效果,最后想了很久想出一个笨方法,自己也是想了蛮久的,怕忘记,所以写在博客上。

嘿嘿!第一次写博客,请大佬们多多指导

直接贴出代码:

css样式随便设:

  

有个容器放数字就行啦:

当月通行次数
0000000000000

最后是js脚本:

setNumText();
 
 var currentNum=2559;
 var i=0;
 var numText=$("#curNum");
 
 function setNumText(){
  var time=1;
  if (i<=currentNum) {
  i++;
  setNum(i,numText);
  }
  if(i>=currentNum && j>=moneyNum){
  
  }else {
  setTimeout("setNumText();",time);
  }
 }
  
 function setNum(num,obj){ 
  if (num<=9 && num>=0) {
  obj.text("000000000000"+num);
  }else if (num<=99 && num>9) {
  obj.text("00000000000"+num);
  }else if (num<=999 && num>99) {
  obj.text("0000000000"+num);
  }else if (num<=9999 && num>999) {
  obj.text("000000000"+num);
  }else if (num<=99999 && num>9999) {
  obj.text("00000000"+num);
  }else if (num<=999999 && num>99999) {
  obj.text("0000000"+num);
  }else if (num<=9999999 && num>999999) {
  obj.text("000000"+num);
  }else if (num<=99999999 && num>9999999) {
  obj.text("00000"+num);
  }else if (num<=999999999 && num>99999999) {
  obj.text("0000"+num);
  }else if (num<=9999999999 && num>999999999) {
  obj.text("000"+num);
  }else if (num<=99999999999 && num>9999999999) {
  obj.text("00"+num);
  }else if (num<=999999999999 && num>99999999999) {
  obj.text("0"+num);
  }else if (num<=9999999999999 && num>999999999999) {
  obj.text(""+num);
  }
 } 

看到这篇博客的大神们有什么更好的实现方法请多多指教

以上这篇js实现数字从零慢慢增加到指定数字示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • position属性absolute与relative的区别和用法详解
    本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池?
    本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 本文介绍了电流源并联合并的方法,以及谐振电路的原理。谐振电路具有很强的选频能力,通过将电感和电容连接在一起,电流和电压会产生震荡。谐振频率的大小取决于电感和电容的大小,而电路中的电阻会逐渐降低震荡的幅度。电阻和电容组成的电路中,当电容放完电后,电阻两端的电压为0,电流不再流过电容。然而,电感是一种特殊的器件,当有电流流过时,线圈会产生感应磁场,阻止电流的流动,从而使电流不会减小。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 标题: ... [详细]
  • 单点登录原理及实现方案详解
    本文详细介绍了单点登录的原理及实现方案,其中包括共享Session的方式,以及基于Redis的Session共享方案。同时,还分享了作者在应用环境中所遇到的问题和经验,希望对读者有所帮助。 ... [详细]
  • 本文介绍了在Docker容器技术中限制容器对CPU的使用的方法,包括使用-c参数设置容器的内存限额,以及通过设置工作线程数量来充分利用CPU资源。同时,还介绍了容器权重分配的情况,以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ... [详细]
author-avatar
是你让我变得冷漠涡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有