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


Posted in Javascript onNovember 07, 2019

最近的学习项目中需要一个数字从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实现数字从零慢慢增加到指定数字示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
详解Angular cli配置过程记录
Nov 07 #Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 #Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 #Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 #Javascript
JS实现随机抽选获奖者
Nov 07 #Javascript
Vue中错误图片的处理的实现代码
Nov 07 #Javascript
vue 实现购物车总价计算
Nov 06 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
用libtemplate实现静态网页生成
2006/10/09 PHP
用Flash图形化数据(一)
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php session安全问题分析
2011/06/24 PHP
php实现aes加密类分享
2014/02/16 PHP
Yii学习总结之安装配置
2015/02/22 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
js判断是否是手机页面
2017/03/17 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
国窖1573广告词
2014/03/21 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python套接字socket通信
2022/04/01 Python