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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JS跨域总结
Aug 30 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
Vue精简版风格概述
Jan 30 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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结合表单实现一些简单功能的例子
2011/06/04 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP的基本常识小结
2013/07/05 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php类自动加载器实现方法
2015/07/28 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
python对象及面向对象技术详解
2016/07/19 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
四年级科学教学反思
2014/02/10 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书