请用js写个加载进度条到100%跳转代码
以下是一个简单的加载进度条到100%跳转的JavaScript代码:
HTML:
<div id="progress"></div>
CSS:
#progress {
width: 0%;
height: 5px;
background-color: #007bff;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: width 0.3s ease-in-out;
}
JavaScript:
// 获取进度条元素
var progress = document.getElementById("progress");
// 设置初始进度为0%
var percent = 0;
// 每100毫秒更新一次进度
var interval = setInterval(function() {
// 假设每次增加1%
percent += 1;
// 更新进度条宽度
progress.style.width = percent + "%";
// 判断是否达到100%
if (percent >= 100) {
// 停止更新进度条
clearInterval(interval);
// 跳转到目标页面
window.location.href = "目标页面的URL";
}
}, 100);
该代码会创建一个高度为5像素的蓝色进度条,每100毫秒增加1%,直到达到100%时跳转到目标页面。您可以根据需要调整进度条样式和每次增加的百分比。
原文地址: https://www.cveoy.top/t/topic/zoR 著作权归作者所有。请勿转载和采集!