js数字自执行随机滚动
每三秒执行一次,若是需要触发执行,可添加一个单击事件.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title></title>
<style type="text/css">
.textC {
position: absolute;
width: 500px;
overflow: hidden;
margin-top: 100px;
line-height: 30px;
margin-left: 300px;
height: 30px;
}
.textC span {
color: #13BEEC;
font-size: 28px;
font-weight: bold;
position: absolute;
}</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
NumbersAnimate.Target = $(".textC");
NumbersAnimate.Numbers = 12389623;
NumbersAnimate.Duration = 1500;
NumbersAnimate.Animate();
});
var NumbersAnimate = {
Target: null,
Numbers: 0,
Duration: 500,
Animate: function () {
var array = NumbersAnimate.Numbers.toString().split("");
//遍历数组
for (var i = 0; i < array.length; i++) {
var currentN = array[i];
//数字append进容器
var t = $("<span></span>");
$(t).append("<span class=\"childNumber\">" + array[i] + "</span>");
$(t).css("margin-left", 18 * i + "px");
$(NumbersAnimate.Target).append(t);
//生成滚动数字,根据当前数字大小来定
for (var j = 0; j <= currentN; j++) {
var tt;
if (j == currentN) {
tt = $("<span class=\"main\"><span>" + j + "</span></span>");
} else {
tt = $("<span class=\"childNumber\">" + j + "</span>");
}
$(t).append(tt);
$(tt).css("margin-top", (j + 1) * 25 + "px");
}
$(t).animate({marginTop: -((parseInt(currentN) + 1) * 25) + "px"}, NumbersAnimate.Duration, function () {
$(this).find(".childNumber").remove();
});
}
},
ChangeNumber: function (numbers) {
var oldArray = NumbersAnimate.Numbers.toString().split("");
var newArray = numbers.toString().split("");
for (var i = 0; i < oldArray.length; i++) {
var o = oldArray[i];
var n = newArray[i];
if (o != n) {
var c = $($(".main")[i]);
var num = parseInt($(c).html());
var top = parseInt($($(c).find("span")[0]).css("marginTop").replace('px', '')); for (var j = 0; j <= n; j++) {
var nn = $("<span>" + j + "</span>");
if (j == n) {
nn = $("<span>" + j + "</span>");
} else {
nn = $("<span class=\"yy\">" + j + "</span>");
}
$(c).append(nn);
$(nn).css("margin-top", (j + 1) * 25 + top + "px");
}
var margintop = parseInt($(c).css("marginTop").replace('px', ''));
$(c).animate({marginTop: -((parseInt(n) + 1) * 25) + margintop + "px"}, NumbersAnimate.Duration, function () {
$($(this).find("span")[0]).remove();
$(".yy").remove();
});
}
}
NumbersAnimate.Numbers = numbers;
}, RandomNum: function (m, a) {
var Range = a - m;
var Rand = Math.random();
return (m + Math.round(Rand * Range));
}
}
$(function () {
setInterval(function () {
NumbersAnimate.ChangeNumber(NumbersAnimate.RandomNum(10000000, 19999999));
console.log(11);
}, 3000)
})
</script>
</head>
<body>
</body>
</html>
js数字自执行随机滚动的更多相关文章
- 通过JS生成由字母与数字组合的随机字符串
在项目中可能需要随机生成字母数字组成的字符,如生成3-32位长度的字母数字组合的随机字符串(位数不固定)或者生成43位随机字符串(位数固定) 使用Math.random()与toString()方法的 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- js代码的执行顺序及运算
代码执行顺序:从上往下,一行一行的执行(也叫一个模块一个模块的执行) 变量的提升(它不是变量的功能,而是浏览器的功能) js代码如何执行? js代码执行前,浏览器会给他一个全局的环境 叫window, ...
- php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）
php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...
- (转载)js引擎的执行过程（二）
概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...
- js数字位数太大导致参数精度丢失问题
最近遇到个比较奇怪的问题,js函数里传参,传一个位数比较大,打印arguments可以看到传过来的参数已经改变. 然后查了一下,发现确实是js精度丢失造成的.我的解决方法是将数字型改成字符型传输,这样 ...
- 超简单的js数字验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- JS数字键盘
JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
随机推荐
- python链接Hive
之前一直用thrift链接Hive,但在运行时总出现问题,一直报缺少模块的错误,装了这个模块,又报缺少那个模块,连了半天,全是泪啊! 原来thrift链接Hive的.py文件后续没人维护,是连不上的. ...
- C#树类型及其遍历
最近有个项目不仅需要取部门的层级关系,还要处理不规则的关系(移除某个部门),只有树结构才能实现相关遍历和操作. 涉及到的知识点:泛型.递归.数据结构 既然研究树类型就先来看下树的定义: 一棵树(tre ...
- 解决依赖冲突：maven-enforcer-plugin插件
我们会经常碰到这样的问题,在pom中引入了一个jar,里面默认依赖了其他的jar包.jar包一多的时候,我们很难确认哪些jar是我们需要的,哪些jar是冲突的.此时会出现很多莫名其妙的问题,什么类找不 ...
- selenium + firefox驱动版本对应。
1)selenium 2.51.0====firefox 46 selenium 3.11.0 ====firefox 56 后来发现最新的火狐浏览器好多插件都不能用了.所以果断回到46.对应的2.5 ...
- spring cloud 配置文件application.yml和bootstrap.yml 的定位，区别和联系
最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...
- 『Python CoolBook：Collections』数据结构和算法_collections.deque队列&yield应用
一.collections.deque队列 deque(maxlen=N)构造函数会新建一个固定大小的队列.当新的元素加入并且这个队列已满的时候,最老的元素会自动被移除掉. 如果你不设置最大队列大小, ...
- python -- 约束、异常处理、MD5
1.类的约束 1.写一个父类,父类中的某个方法要抛出一个异常 NotImplementedError class Base: # 对子类进行了约束,必须重写该方法 def login(se ...
- C# 用 WebClient 的 Post 方法向 WebServer 传输数据
帮朋友做一个通过Web简单传输数据的例子,百度了一下抄了段代码,完成,效果如下: 其中textBox1里面是客户端需要传输过去的数据,textBox2里面是接收到的返回数据. 代码如下: using ...
- JQ 向上查找指定 同辈元素 找到后返回
由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是: 在同辈元素中向上找,直到找到 我指定的元素 后,返回他. 所以自己写了个 ...