【无标题】juqery实现页面进度条加载

最新推荐文章于 2024-06-14 20:38:29 发布

陈诞

最新推荐文章于 2024-06-14 20:38:29 发布

阅读量803

点赞数 19

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44819536/article/details/134769319

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>进度条示例</title>
		<style>
			/* 进度条样式 */
			#progress-bar-container {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				max-width: 400px;
				height: 5px;
				background-color: #ccc;
				display: none;
			}

			#progress-bar {
				height: 100%;
				width: 0;
				background-color: #4caf50;
				position: relative;
			}

			#progress-text {
				position: absolute;
				top: -20px;
				right: 0;
				font-size: 12px;
				color: #000;
			}

			/* 全局样式，用于禁用整个页面 */
			.disabled {
				pointer-events: none;
			}
		</style>
	</head>
	<body>

		<!-- 进度条容器 -->
		<div id="progress-bar-container">
			<div id="progress-bar">
				<div id="progress-text">0%</div>
			</div>
		</div>

		<!-- 你的页面内容 -->
		<div id="content">
			<button id="triggerButton">触发异步操作</button>
		</div>

		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				// 获取进度条容器和内容元素
				const progressBarContainer = $('#progress-bar-container');
				const progressBar = $('#progress-bar');
				const progressText = $('#progress-text');
				const contentElement = $('#content');

				// 显示进度条和全局遮罩层
				function showProgressBar() {
					progressBarContainer.show();
					contentElement.addClass('disabled');
				}

				// 更新进度条和百分比文本
				function updateProgressBar(percentage) {
					progressBar.width(percentage + '%');
					progressText.text(percentage + '%');
				}

				// 隐藏进度条和全局遮罩层
				function hideProgressBar() {
					progressBarContainer.hide();
					progressBar.width(0);
					progressText.text('0%');
					contentElement.removeClass('disabled');
				}

				// 模拟异步操作
				function simulateAsyncOperation() {
					showProgressBar();

					let progress = 0;

					function updateProgress() {
						// 模拟异步操作的进度
						progress += 10;
						updateProgressBar(progress);

						if (progress < 100) {
							// 如果进度未达到100%，则继续更新
							setTimeout(updateProgress, 500);
						} else {
							// 进度达到100%后隐藏进度条和全局遮罩层
							hideProgressBar();
							alert("异步操作完成，刷新页面！");
						}
					}

					// 开始定期更新进度
					updateProgress();
				}
				
				// 模拟异步操作
				/* function simulateAsyncOperation() {
				    showProgressBar();
				
				    // 发送开始处理的请求
				    $.ajax({
				        url: "你的接口",
				        type: "post",
				        dataType: "json",
				        data: { 参数 },
				        timeout: 0,
				        success: function (res) {
				            // 处理完成
				            updateProgressBar(100); // 确保进度条到达100%
				            hideProgressBar();
				            layer.msg(res.data, { time: 500 }, function () {
				                window.parent.location.reload();
				            });
				        },
				        error: function (xhr, status, error) {
				            hideProgressBar();
				            console.error("Error:", status, error);
				        }
				    });
				
				    // 启动长轮询以获取进度更新
				    (function pollForProgress() {
				        $.ajax({
				            url: "/path/to/progress/update", // 获取进度的接口
				            type: "get",
				            success: function(data) {
				                updateProgressBar(data.progress); // 更新进度条
				                if (data.progress < 100) {
				                    setTimeout(pollForProgress, 1000); // 递归调用
				                }
				            },
				            error: function() {
				                setTimeout(pollForProgress, 1000); // 出错时重试
				            }
				        });
				    })();
				} */
                
				

				// 例子：在按钮点击时触发异步操作
				$('#triggerButton').on('click', simulateAsyncOperation);
			});
		</script>

	</body>
</html>