用JS当进度条100时跳转页面
时间: 2024-04-21 08:27:55 浏览: 9
你可以使用 HTML5 中的 <progress> 标签来创建进度条,然后使用 JavaScript 来控制其进度并在进度条达到 100% 时跳转页面。
以下是一个示例代码:
```html
<progress id="myProgress" value="0" max="100"></progress>
<script>
var progressBar = document.getElementById("myProgress");
var progress = 0;
function updateProgress() {
progress++;
progressBar.value = progress;
if (progress == 100) {
window.location.href = "http://example.com";
} else {
setTimeout(updateProgress, 10);
}
}
updateProgress();
</script>
```
在这个示例中,我们创建了一个 <progress> 元素并将其值初始化为 0,最大值为 100。然后,我们使用 JavaScript 来递增进度条的值并检查是否达到了 100。如果进度条达到了 100,我们将使用 `window.location.href` 将页面跳转到指定的 URL。如果进度条未达到 100,则使用 `setTimeout` 函数来延迟 10 毫秒并继续更新进度条,直到达到 100。