html5 进度条效果<progress>

最新推荐文章于 2021-06-02 19:20:17 发布

青天诀

最新推荐文章于 2021-06-02 19:20:17 发布

阅读量716

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/u012193330/article/details/44132949

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<body>
	<p id="pTip">开始下载</p>
	<progress value="0" max="100" id="proDownFile"></progress>
	<input type="button" value="下载按钮" class="inputbtn" οnclick="Btn_Click();" />
	<script type="text/javascript">
		var intTimer;
		var intValue=0;
		var objTip=document.getElementById('pTip');
		var objPro=document.getElementById('proDownFile');
		function Interval_handler(){
			intValue++;
			objPro.value=intValue;
			if(intValue>=objPro.max)
			{
				clearInterval(intTimer);
				objTip.innerHTML="恭喜你，下载已经完成。";
			}
			else{
				objTip.innerHTML="请耐心等待，正在下载中 "+intValue+"%";
			}
		}
		function Btn_Click(){
			intTimer=setInterval(Interval_handler,100);
		}
	</script>
</body>

运行效果图：