EasyUI 进度条

最新推荐文章于 2023-01-14 06:56:17 发布

原创最新推荐文章于 2023-01-14 06:56:17 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用jQuery EasyUI库创建一个可以动态更新的进度条组件，并演示了通过JavaScript设置初始值及随机增加进度的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<title>进度条</title>
		<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/icon.css"/>
		<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.min.js"></script>
		<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
		<script>
			$(function (){
				$('#p').progressbar({   
					value: 60   
				}); 
				
				var value = $('#p').progressbar('getValue');   
				if (value < 100){   
					value += Math.floor(Math.random() * 10);   
					$('#p').progressbar('setValue', value);   
				} 
			})
		</script>
	</head>
	<body>
		<div id="p" style="width:400px;"></div>  
	</body>
</html>