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 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
总结js函数相关知识点
Feb 27 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
自荐信格式的六要素
2013/09/21 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
物流业务员岗位职责
2014/02/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
小学语文教研活动总结
2014/07/01 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
国庆横幅标语
2014/10/08 职场文书
个人作风建设总结
2014/10/23 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL