js纯数字逐一停止显示效果的实现代码


Posted in Javascript onMarch 16, 2016

js纯数字逐一停止显示效果的实现代码

function showScore($ele, num, secand, pause){ //second 按照秒数,动画运行多少秒
        if (!secand) { secand = 2;}
        if (!pause) { pause = 20;}

        var len = String(num).length;

        var temnum, times = 0 , stepTimes, max ;
        var numArr = String(num).split("");


        function getRandom(n){
          var num = Math.floor(Math.random()*(Math.pow(10, n)-1 - Math.pow(10, n-1))+Math.pow(10, n-1));

          if (String(num).length !== n) {num = getRandom(n);}

          return num;
        }

        function setValue(num, pause, secand){//second 运行多少秒后停止
          var len = String(num).length, j=0;

          if (!stepTimes) {
            max = Math.ceil(secand*1000/len);
            stepTimes = Math.ceil(max/pause);
          }
          
          temnum = "";
          setTimeout(function(){
            for (var i = 1; i <= len; i++) {
              if (times >= stepTimes*i) {
                j++;
                temnum += numArr[i-1]+"";
              }else{
                break;
              }
            };

            if (j < len) {
              $ele.html(temnum+""+getRandom(len-j));
            }else{
              $ele.html(temnum);
            }
            
            
            if (times >= max || j >= len) {return;};

            setValue(num, pause, secand);
            times++;
            
          }, pause);


        }

        setValue(num, pause, secand);

      }

showScore($(".num"), 2344, 1.5, 10);

js纯数字逐一停止显示效果的实现代码

效果纯数字逐一停止显示效果,比如这个个数字不停的变化,第一位先定下来,第二位再确定,然后第三位再确定下来。因为项目用了几天废弃,所以存下档。

以上这篇js纯数字逐一停止显示效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
vue配置接口域名方法总结
May 12 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 #Javascript
js获取时间精确到秒(年月日)
Mar 16 #Javascript
js实现内容显示并使用json传输数据
Mar 16 #Javascript
javascript中arguments,callee,caller详解
Mar 16 #Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
文员个人的求职信范文
2013/09/26 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
统计工作个人总结
2015/03/03 职场文书
golang 语言中错误处理机制
2021/08/30 Golang