每三秒执行一次,若是需要触发执行,可添加一个单击事件.
<!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>
