正文

如何实现JavaScript中两个页面跳转并添加加载条

/0 浏览量
0520

当需要通过JavaScript实现页面跳转并添加一个加载条效果时，我们可以使用原生的JavaScript以及HTML和CSS来达到这个目的。以下是一个简单的实现步骤：

基本思路

  1. HTML：创建一个加载条元素。
  2. CSS：为加载条设计样式，使其能够在页面中可见。
  3. JavaScript：编写跳转函数，同时控制加载条的显示和隐藏。

步骤详解

1. 创建加载条HTML

首先，在你的页面中添加一个用于显示加载条的元素，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面跳转与加载条示例</title>
</head>
<body>

<!-- 加载条容器 -->
<div id="loadingBar" style="display:none; width:0%; height:30px; background-color:blue; position:fixed; left:0; top:50%;">
</div>

<script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

为加载条添加基本的样式，以便它能够被视觉化。可以在你的<head>部分中添加如下CSS代码：

#loadingBar {
    width: 100%;
    height: 5px;
    background-color: #00bcd4;
    transition: width 0.4s ease-in-out;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
}

3. 编写JavaScript脚本

最后，你需要编写一个JavaScript函数来控制页面跳转和加载条的效果。以下是script.js的内容：

// 定义页面跳转函数
function redirectTo(url) {
    // 显示加载条
    document.getElementById('loadingBar').style.display = 'block';

    // 模拟页面加载时间
    setTimeout(function() {
        // 指定页面跳转时间（例如3秒后）
        window.location.href = url;

        // 隐藏加载条
        document.getElementById('loadingBar').style.display = 'none';
    }, 3000);
}

// 使用函数进行页面跳转，传入目标URL
redirectTo('https://www.example.com');

解释

  • 显示加载条：在页面跳转前，通过display = 'block'将加载条设置为可见。
  • 模拟页面加载时间：使用setTimeout函数来模拟页面加载的过程。在实际应用中，你可以根据需要调整这个时间。
  • 页面跳转：设置window.location.href到指定的URL进行页面跳转。
  • 隐藏加载条：页面跳转完成后，隐藏加载条。

通过这种方式，你可以实现一个简单的页面跳转和加载条效果。当然，这只是一个基础的实现，根据实际需求，你可能需要进一步调整加载条的样式和功能。

-- 展开阅读全文 --