加载100%,然后自动跳转其他页面
时间: 2023-09-13 09:04:34 浏览: 44
好的,在上面的代码基础上,可以在加载完成后自动跳转到其他页面。可以在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";
}
});
```
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)