jquery.countup实现数字滚动

效果图
<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数字动画</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			display: flex;
			width: 100vw;
			height: 100vh;
			background: lightblue;
		}

		.count {
			position: relative;
			font-size: 100px;
			font-weight: 600;
			color: #268F81;
			margin: auto;
			letter-spacing: 5px;
			display: flex;
		}

		.item {
			background: #FFF;
			text-align: center;
			border-left: 1px solid #CCCCCC;
			border-right: 1px solid #CCCCCC;
			margin: 0 2px;
		}
	</style>
</head>

<body>
	<div class="box">
		<span class="count">6849874165182</span>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="http://sucai.suoluomei.cn/sucai_zs/file/20191112160050-jquery.countup.min.js"></script>

<script>
	var count = '6849874165182'
	var split = count.split('')
	var num = ''
	new Promise(function (resolve, reject) {
		split.forEach(function (i) {
			num += `<div class="item">${i}</div>`
		})
		$('.count').html(num)
		resolve(num)
	}).then(res => {
		$('.count .item').countUp({
			delay: 10,//动画延迟执行
			time: 2000//动画持续时间
		});
	})
</script>
<script>
	// 可以直接写
	// $('.count').countUp({
	// 	delay: 10,
	// 	time: 2000
	// });
</script>

</html>