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

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纯数字逐一停止显示效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

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

    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(""

  • 基于JS实现数字动态变化显示效果附源码

    先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标 以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(number) 效果:多个页面元素中,均以动态效果显示不同的数字,可正可负.并动态改变至少一个元素内的数据. 2.基本原理 (1) 液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧.  (2) 动态变化则通过使用定时器任务来完成,动态显示要确保变化足够的时长,因此,步长需要根据变化量来进行计

  • js 纯数字不重复排列的另类方法

    参考无忧cosin的方法后(多谢),整理的方法如下 复制代码 代码如下: //一段随机数,模拟用 var baseNum=[]; for(var i= 0;i< 100000 ;i++){ random = Math.floor(Math.random()*i); baseNum.push(random); } var baseNumLen = baseNum.length; var numSubscript = []; //将数字作为下标和值放到另一数组内,实现排序和不重复 for (var

  • JS格式化数字保留两位小数点示例代码

    问题:在JS中格式化数据保留两位小数的函数的多种方法 最好方法: 保留两位好像是这样吧 复制代码 代码如下: var a = 9.39393; alert(a.toFixed(2)); 说明: alert(Number.toFixed(9.39393)); 返回的是9.39 但是只有ie5.5以上的版本才支持. 其它方法: function roundFun(numberRound,roundDigit) //四舍五入,保留位数为roundDigit { if (numberRound>=0)

  • js猜数字小游戏的简单实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 原生js实现数字字母混合验证码的简单实例

    本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:

  • js仿小米二级菜单显示效果

    本文实例为大家分享了js仿小米二级菜单显示效果的具体代码,供大家参考,具体内容如下 提示:以下是本篇文章正文内容,下面案例可供参考 一.效果展示 二.代码 1.页面样式 代码如下(示例): <!-- 搜索栏 主导航 logo -->     <header class="clearfix">         <div class="w">             <div class="logo">

  • JS实现的幻灯片切换显示效果

    本文实例讲述了JS实现的幻灯片切换显示效果.分享给大家供大家参考,具体如下: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • IOS判断字符串是不是纯数字的方法总结

    前言 在大家开发项目的时候,遇到需求可能是让我们只输入一段纯数字,这时候我们就要对这个字符串进行筛选判断,不符合纯数字进行提示操作,以求达到最好的交互效果也能满足需求. 下面介绍几种判断字符串是否为纯数字的方法 第一种方式是使用NSScanner: 1. 整形判断 - (BOOL)isPureInt:(NSString *)string{ NSScanner* scan = [NSScanner scannerWithString:string]; int val; return [scan s

  • iOS 正则表达式判断纯数字及匹配11位手机号码的方法

    第一种使用正则表达式 判断 //是否是纯数字 + (BOOL)isNumText:(NSString *)str{ NSString * regex = @"(/^[0-9]*$/)"; NSPredicate * pred = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", regex]; BOOL isMatch = [pred evaluateWithObject:str]; if (isMatch)

随机推荐