使用JavaScript写一个加载到100%就跳转到其他页面
时间: 2023-09-05 14:07:21 浏览: 50
您可以使用以下JavaScript代码实现您的要求:
```javascript
// 在页面加载完成后执行
window.onload = function() {
// 设置一个定时器,延迟1秒执行
setTimeout(function() {
// 跳转到指定页面
window.location.href = "http://example.com";
}, 1000);
}
```
上述代码会在页面加载完成后延迟1秒执行,然后将页面重定向到指定的URL。您可以将URL替换为您想要跳转的页面的URL。
相关问题
编写一个进度条加载网页动画,加载到100%,使网页自动跳转到百度网站
您可以使用JavaScript和CSS来创建一个进度条加载网页动画,并在加载完成后自动跳转到百度网站。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条加载网页动画</title>
<style>
#progress-bar {
width: 100%;
height: 10px;
background-color: #f0f0f0;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#progress {
width: 0%;
height: 100%;
background-color: #007bff;
transition: width 0.5s ease-in-out;
}
</style>
<script>
window.onload = function() {
var progressBar = document.getElementById("progress");
var interval = setInterval(function() {
progressBar.style.width = progressBar.offsetWidth + 10 + "px";
if (progressBar.offsetWidth >= window.innerWidth) {
clearInterval(interval);
window.location.href = "https://www.baidu.com";
}
}, 50);
};
</script>
</head>
<body>
<div id="progress-bar">
<div id="progress"></div>
</div>
</body>
</html>
```
在上述代码中,我们创建了一个进度条加载网页动画。当页面加载完毕后,通过 `window.onload` 事件触发的回调函数开始执行。我们使用 `setInterval` 方法定时更新进度条的宽度,每次增加10像素,直到进度条的宽度达到页面宽度时,清除定时器并将页面自动跳转到百度网站。
请确保将代码保存为HTML文件并在浏览器中打开运行。注意,由于跳转到其他网站是一种突然的行为,可能会被部分浏览器拦截,请确保浏览器设置允许自动跳转。
加载100%,然后自动跳转其他页面
好的,在上面的代码基础上,可以在加载完成后自动跳转到其他页面。可以在JavaScript中监听动画结束的事件,在加载完成后隐藏加载动画并跳转页面,例如:
```
var progress = document.querySelector(".progress");
progress.addEventListener("animationend", function() {
if (progress.style.width == "100%") {
var loading = document.querySelector(".loading");
loading.style.display = "none";
window.location.href = "其他页面的URL";
}
});
```
这样就可以在加载完成后自动跳转到其他页面了。完整代码如下:
HTML代码:
```
<div class="loading">
<div class="progress"></div>
</div>
```
CSS代码:
```
.progress {
width: 0%;
height: 10px;
background-color: #007bff;
animation: progress 2s ease-in-out;
}
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
```
JavaScript代码:
```
var progress = document.querySelector(".progress");
progress.addEventListener("animationend", function() {
if (progress.style.width == "100%") {
var loading = document.querySelector(".loading");
loading.style.display = "none";
window.location.href = "其他页面的URL";
}
});
```