html5-进度条-progress

最新推荐文章于 2025-01-02 15:09:38 发布

转载最新推荐文章于 2025-01-02 15:09:38 发布 · 660 阅读

Html5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的进度条自动填充效果。通过设置`<progress>`标签的最大值，并利用JavaScript定时更新进度条的当前值，演示了如何在网页加载完成后逐步填充进度条直至达到最大值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function()
			{
					var i = 0; 
					var one = document.getElementById("one");
					var oneValue = one.getAttribute('max');

					var timer = setInterval(function(){
						
						i = i+1;
						if(i <= oneValue)
						{
							one.setAttribute('value',i)
						}
						
						if(i == oneValue - 10)
						{
							setTimeout(function(){
								clearInterval(timer)
							})
						}
					},200)
					
					
			}
		
		</script>
	</head>
	<body>
		<progress value="0" max="100" id="one"></progress>
		<progress value="50" max="100"></progress>
	</body>
</html>