以下是一个简单的加载进度条到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%时跳转到目标页面。您可以根据需要调整进度条样式和每次增加的百分比。

请用js写个加载进度条到100%跳转代码

原文地址: https://www.cveoy.top/t/topic/zoR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录