首先，确保你已经包含了 jQuery 和 jQuery UI 的库。你可以在头部添加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressbar Example</title>
<!-- 引入 jQuery 和 jQuery UI 的库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 创建一个 div 作为进度条容器 -->
<div id="progressbar"></div>
<script>
// 使用 jQuery UI 的进度条
$(function() {
// 初始化进度条
$("#progressbar").progressbar({
value: 50 // 初始值为 50%
});
// 模拟进度增加，你可以根据需要调整这个值
function increaseProgress() {
var currentValue = $("#progressbar").progressbar("value");
if (currentValue < 100) {
$("#progressbar").progressbar("value", currentValue + 10);
}
}
// 每隔一秒增加一次进度，你可以根据需要调整这个时间间隔
setInterval(increaseProgress, 1000);
});
</script>
</body>
</html>
在这个例子中，我们创建了一个 div 作为进度条容器（id 为 "progressbar"），并通过 $("#progressbar").progressbar({ value: 50 }); 初始化进度条，将初始值设为 50%。
然后，我们定义了一个用于增加进度的函数 increaseProgress，并使用 setInterval 模拟每隔一秒钟增加一次进度。你可以根据实际需求调整初始值、增加的步长和时间间隔。
转载请注明出处：http://www.zyzy.cn/article/detail/13067/jQuery UI