脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 数字增加到指定数字

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

 更新时间：2019年11月07日 09:30:35   作者：ccaicainiao  
今天小编就为大家分享一篇js实现数字从零慢慢增加到指定数字示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

嘿嘿！第一次写博客，请大佬们多多指导

直接贴出代码：

css样式随便设：

 <style type="text/css">
  #curNum,#moneyNum{
  padding:0.3em;
  border: rgba(14,250,248,1) solid 2px;
  font-size: 18px;
  text-align: center;
  }
 </style>

有个容器放数字就行啦：

<h5 style="text-align: center;font-weight: bold;">当月通行次数</h5>
<div id="curNum" class="col-sm-12" >
 0000000000000
</div>

最后是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实现数字从零慢慢增加到指定数字示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 通过V8源码看一个关于JS数组排序的诡异问题

    通过V8源码看一个关于JS数组排序的诡异问题

    一直在学习C++，也想阅读点开源的C++项目，发现网上对Google V8评价不错，于是上Github上找到了源代码，但在学习中遇到一个js数组排序的问题，下面这篇文章主要给大家介绍了通过V8源码说说一个关于JS数组排序的诡异问题的相关资料，需要的朋友可以参考下。
    2017-08-08
  • 浅谈js中对象的使用

    浅谈js中对象的使用

    下面小编就为大家带来一篇浅谈js中对象的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Javascript 学习笔记 错误处理

    Javascript 学习笔记 错误处理

    Javascript学习笔记:错误处理.
    2009-07-07
  • js调用AJAX时Get和post的乱码解决方法

    js调用AJAX时Get和post的乱码解决方法

    在使用"get"时，抓取的页面最后加上编码类型，在使用post时用vbscript解决了编码问题，具体实现如下，有类似情况的朋友可以参考下哈
    2013-06-06
  • js删除对象/数组中null、undefined、空对象及空数组方法示例

    js删除对象/数组中null、undefined、空对象及空数组方法示例

    这篇文章主要给大家介绍了关于js删除对象/数组中null、undefined、空对象及空数组的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编一起来看看吧
    2018-11-11
  • javascript中可能用得到的全部的排序算法

    javascript中可能用得到的全部的排序算法

    因此本篇重拾了出镜概率比较高的十来种排序算法, 逐一分析其排序思想, 并批注注意事项. 欢迎对算法提出改进和讨论
    2020-03-03
  • js动态实现表格添加和删除操作

    js动态实现表格添加和删除操作

    这篇文章主要为大家详细介绍了js动态实现表格添加和删除操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript为事件句柄绑定监听函数实例详解

    JavaScript为事件句柄绑定监听函数实例详解

    这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下
    2015-12-12
  • 微信小程序的线程架构【推荐】

    微信小程序的线程架构【推荐】

    这篇文章主要介绍了微信小程序的线程架构，每个小程序包含一个描述整体程序的app实例和多个描述页面的page，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • Javascript实现购物车功能的详细代码

    Javascript实现购物车功能的详细代码

    这篇文章使用js实现购物车的价格计算，商品数量更换，商品删除等功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05

最新评论