我从 API 获取数据，我想将其显示在表格上。但是，此表具有选框滚动功能。
内容应显示在示例代码中。这很好用。
挑战是scroll delay，我想显示记录，然后延迟 3 秒，然后再次开始循环。
目前，延迟在大约 80 秒后开始，猜猜这是默认设置吗？
等等，我知道选框已被弃用，但是，它适用于这种情况。
有谁知道该怎么做？
var response = [
{
"collected_received": 805,
"tested": 526,
"perc_less_1000": 0.8768267,
"rejected": 1
},
{
"collected_received": 788,
"tested": 1933,
"perc_less_1000": 0.9077469,
"rejected": 0
},
{
"collected_received": 114,
"tested": 2342,
"perc_less_1000": 0.9503951,
"rejected": 16
},
{
"collected_received": 492,
"tested": 767,
"perc_less_1000": 0.8912732,
"rejected": 7
},
{
"collected_received": 186,
"tested": 909,
"perc_less_1000": 0.9170404,
"rejected": 1
},
{
"collected_received": 115,
"tested": 378,
"perc_less_1000": 0.931694,
"rejected": 1
},
{
"collected_received": 26,
"tested": 368,
"perc_less_1000": 0.9466292,
"rejected": 0
}
];
var trHTML = '';
$.each(response, function (i, item) {
trHTML += '<tr><td width="130px"><div style="width: 35px;border-radius: 0.1vw; text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.collected_received + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.tested + '</div></td><td width="130px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.perc_less_1000.toFixed(1) + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.rejected + '</div></td></tr>';
});
$('#records_table').append(trHTML);.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 140s linear 0s infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
top: 40em
}
100% {
top: -300em
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row contain"
style="background-color: rgba(0,0,0,.15); margin:2px; height:150vh; max-height:94vh;border-radius: 0.9vw;">
<div class="table-responsive">
<table class="table table-condensed table-striped table-sm" style="color: white;"
id="table_fixed">
<thead>
<tr>
<th width="130px">Received</th>
<th width="90px"> Tested </th>
<th width="130px">Total (%)</th>
<th width="90px">Rejected </th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive" id="contain">
<table class="marquee table table-condensed table-striped table-sm" style="color: white;truespeed:10;"
id="records_table">
<tbody>
</tbody>
</table>
</div>实际上，没有选项可以设置下一次迭代的延迟，但是我们可以通过 CSS 中的小改动来管理它，如下所示，请尝试使用这个 CSS
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear 0s infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
top: 30em;
}
100% {
top: -30em;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句