<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.loading {
display: table;
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background-color: #fff;
z-index: 5;
}
.loading .progress {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<script>
window.loadingStartTime = new Date()
</script>
</head>
<body>
<div class="loading" id="loading">
<div class="progress" id="progress">0%</div>
</div>
<script src='node_modules/jquery/dist/jquery.js'></script>
<script>
var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0
var timer = 0
var now = new Date() // 记录当前时间
var timeout = 5000 // 超时时间
progress([80, 90], [1, 3], 100)
window.onload = () => {
complete()
}
if (now - loadingStartTime > timeout) { // 超时
complete()
} else {
window.setTimeout(() => { // 未超时，则等待剩余时间
complete()
}, timeout - (now - loadingStartTime))
}
function complete () { // 封装完成进度功能
progress(100, [1, 5], 10, () => {
window.setTimeout(() => {
$loading.hide()
}, 1000)
})
}
function progress (dist, speed, delay, callback) {
var _dist = random(dist)
var _delay = random(delay)
var _speed = random(speed)
window.clearTimeout(timer)
timer = window.setTimeout(() => {
if (prg + _speed >= _dist) {
window.clearTimeout(timer)
prg = _dist
callback && callback()
} else {
prg += _speed
progress (_dist, speed, delay, callback)
}
$progress.html(parseInt(prg) + '%')
console.log(prg)
}, _delay)
}
function random (n) {
if (typeof n === 'object') {
var times = n[1] - n[0]
var offset = n[0]
return Math.random() * times + offset
} else {
return n
}
}
</script>
</body>
</html>