HTML 5 进度条

最新推荐文章于 2025-07-20 09:05:01 发布

每逢佳节掉三根.

最新推荐文章于 2025-07-20 09:05:01 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 文章标签：进度条

本文链接：https://blog.youkuaiyun.com/qq_42043377/article/details/84204113

H5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML5的Progress元素实现动态进度条的方法，通过JavaScript定时更新进度条的值，模拟文件下载过程，同时实时显示下载百分比。

.pro progress{
			-webkit-appearance:none;
		}
		.pro ::-webkit-progress-bar{
			border:1px solid cyan;
			border-radius: 4px;
		}
		.pro ::-webkit-progress-value{
			background-color: #34538b;
		}
		.pro ::-moz-progress-bar{
			background: #34538b
		}
		.pro ::-ms-fill{
			background: #34538b
		}

<section class="pro">
		<progress>
			进度条用于表示某个任务的完成程度,比如文件下载,文件下载到本地的进度值可以
			使用1-100的值,也可以百分比
		</progress>
		<p id="pTip">开始下载</p>
		<progress value="0" min="0" max="1024" id="proDownFile"></progress>
		<input type="button" value="下载" id="btn">
	</section>

	<script>
		var num = 0;
		var timer = null;
		btn.onclick = function(){
			timer = setInterval(function(){
				num++;
				if (num > 1024) {
					clearInterval(timer);
					pTip.innerHTML = '下载完成';
				}else{
					pTip.innerHTML = '已下载'+Math.ceil(num / proDownFile.max * 100)+'%';
				}
				proDownFile.value = num;
			},10)
		}
	</script>