<div class="numBox">
<div class="jump">
<div>
<div class="number"><span class="num" id="num">60</span>+</div>
<div class="text">演讲<br />嘉宾</div>
</div>
<div>
<div class="number"><span class="num" id="num1">20</span>+</div>
<div class="text">主题<br />演讲</div>
</div>
<div>
<div class="number"><span class="num" id="num2">6</span>+</div>
<div class="text">圆桌<br />讨论</div>
</div>
<div>
<div class="number"><span class="num" id="num3">1,500</span>+</div>
<div class="text">现场<br />参会者</div>
</div>
</div>
</div>
.numBox {
position: absolute;
top: 400px;
width: 100%
}
.jump {
width: 1200px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-between;
}
.jump>div {
width: 20%;
list-style: none;
text-align: center;
}
.jump .number,
.jump .number .num {
color: #333;
font-size: 60px;
font-weight: bold;
margin: 30px 0
}
.jump .text {
margin-top: 10px;
letter-spacing: 1px;
line-height: 100%;
position: relative;
margin: 16px 0;
padding: 16px 0;
color: #ffffff;
line-height: 1.5em
}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function addNumber(interval, addindex, end, fn, number) {
var current = 0;
var time = setInterval(function () {
current = current + addindex;
if (current >= end) {
clearInterval(time);
current = number;
}
fn(current);
}, interval);
}
$(function () {
var time = setInterval(function () {
addNumber(100, 5, 60, function (n) {
$("#num").html(n); //文本改变
}, 60);
addNumber(100, 2, 20, function (n) {
$("#num1").html(n);
}, 20);
addNumber(100, 1, 12, function (n) {
$("#num2").html(n);
}, 12);
addNumber(100, 1, 6, function (n) {
$("#num4").html(n);
}, 6);
addNumber(10, 20, 1500, function (n) {
$("#num3").html(n);
}, "1,500");
}, 5000);
});
</script>