现满足需求
-
1.5(time1)分钟请求一次接口
2.每次请求接口随机数脚本停止5(time2)秒钟
3.没2(time3)秒执行一次随机数脚本
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1bf87db9127f1ab61bce2dd3cfe4bab7.png)
话不多说,直接上代码
html版块
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.list-content{
text-align: center;
margin-top: 300px;
}
.list {
height: 84px;
font-size: 0;
letter-spacing: -5px;
white-space: nowrap;
}
.list i {
position: relative;
display: inline-block;
width: 64px;
height: 84px;
text-align: center;
color: #e8cd92;
font-size: 28px;
letter-spacing: 0;
overflow: hidden;
margin-right: 3px;
}
.list span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 840px;
background: url(data:image/png;base64,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) no-repeat;
background-size: 100% 100%;
}
.list b {
display: inline-block;
font-size: 28px;
margin-right: 3px;
}
</style>
<body>
<div class="list list-content"></div>
</body>
<script src="http://prewww.jtexpress.com.cn/js/common/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
js版块
/*
现满足需求
5(time1)分钟请求一次接口
每次请求接口随机数脚本停止5(time2)秒钟
没2(time3)秒执行一次随机数脚本
**/
/*
取值规则[randomMinNum <= randomNum < randomMaxNum]
numberALL: 请求接口的具体数字
randomMinNum: 随机最小数
randomMaxNum: 随机最大数
randomNum: 某一次的随机数
randomstate:是否开启随机脚本
setTimeout1: 每5分钟执行一次ajax
setTimeout2 每n秒执行一次随机数脚本
setTimeout3 停止多少秒执行随机数脚本
time1: 执行接口时间
tiem2: 执行随机数脚本时间
time3: 执行停止随机数脚本时间
**/
var numberALL = "52568945465"
var randomMinNum = 2,
randomMaxNum = 200,
randomNum,
randomstate = false,
setTimeout1,
setTimeout2,
setTimeout3,
time1 = 5 * 60,
time2 = 5,
time3 = 2;
ajaxFun();
//请求接口
function ajaxFun() {
clearTimeout(setTimeout1)
clearTimeout(setTimeout2)
clearTimeout(setTimeout3)
randomstate = false;
numberALL = parseInt(numberALL) + 10000 //请求接口
numberRoll('.list', numberALL, 1000, true);
setTimeout1 = setTimeout(ajax, time1 * 1000);
randomstate = true;
if (randomstate) {
setTimeout3 = setTimeout(random1Second, time2 * 1000)
}
}
// 随机数脚本
function random1Second() {
clearTimeout(setTimeout2)
randomNum = parseInt(Math.random() * (randomMaxNum - randomMinNum) + randomMinNum, 10)
numberALL = parseInt(numberALL + randomNum)
// console.log(numberALL)
numberRoll('.list', numberALL, 800, true);
setTimeout2 = setTimeout(random1Second, time3 * 1000);
}
// 数字滚动
function numberRoll(obj, number, speed, hasComma) {
var $obj = $(obj),
numStr = String(number),
len = numStr.length,
h = $obj.height(),
i;
// 如果新的数字短于当前的,要移除多余的i
if ($obj.find('i').length > len) {
$obj.find('i:gt(' + (len - 1) + ')').remove();
}
// 移除千分位分隔符
if (hasComma) {
$obj.find('b').remove();
}
for (i = 0; i < len; i++) {
// 位数不足要补
if ($obj.find('i').length < len) {
$obj.append('<i><span></span></i>');
}
// 加分隔符
if (hasComma && i < len - 1 && (len - i - 1) % 3 === 0) {
$('<b >,</b>').insertAfter($obj.find('i').eq(i));
}
// console.log($obj.height())
$obj.find('i').eq(i).find("span").animate({
"top": -(numStr.charAt(i) * h)
}, speed || 1000);
}
}