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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
AJAX学习笔记
May 18 Javascript
详解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
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
JavaScript中读取和保存文件实例
2014/05/08 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
python中通过预先编译正则表达式提高效率
2017/09/25 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python递归函数绘制分形树的方法
2018/06/22 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python的json包位置及用法总结
2020/06/21 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
料理师求职信
2014/01/30 职场文书
主题实践活动总结
2014/05/08 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年财政局工作总结
2014/12/09 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
医院合作意向书范本
2015/05/08 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis