HTML如何实现进度条？附源码

2021-05-27 11:27:52 浏览数 (6348)

进度条在网页开发中还是很常见的，比如当我们下载某个文件时，会显示下载进度。那么这篇文章 w3cschool 小编来教你 HTML 如何实现进度条。

progress 标签

在 HTML5 中，有专门的特性来实现进度条，那就是​<progress></progress>​标签。但是在使用进度条特性时，我们必须为它设定交互才能实现动态进度条。那么我们一起来看下如何使用 progress 吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML实现进度条 - 编程狮(w3cschool.cn)</title>
</head>
<body>
	<progress id="progress" value="0" max="100"></progress>
	<button onclick="load(100)">下载</button>
	<script type="text/javascript">
		function load(n){
			if (n==0) {alert("下载完成")};
			var progress=document.getElementById("progress");
			n=n-1;
			task=100-n;
			progress.value=task;
			setTimeout("load("+n+")",100);
		}
	</script>
</body>
</html>

我们看代码可以了解到，单纯的标签是不能起作用的，需要使用 script 语句去进行控制。在 progress 标签中，我们需要为它设置 max 属性值，max 是指进度条的最大值；value 是用来设置或者返回进度条 value 的属性值。

在 script 语句中，我们首先要设置点击事件，也就是点击按钮交互开始。其次设置一个变量值，最后使用​setTimeout()​方法去计时。让我们来看下具体实现效果：

HTML实现进度条

HTML实现进度条

以上就是文章“HTML 如何实现进度条？附源码”的全部内容。更多HTML学习请关注 w3cschool。