HTML 进度条

王林原创: 2024-09-04 16:47:37886浏览

W3C 标准规定进度条使用进度元素完成特定任务。开发者使用进度标签在网页上显示进度条并表示文件上传进度。 HTML 包含此标签，为 Web 开发人员提供了一种显示栏的简单方法。该标签与完全不同。标签，代表磁盘空间使用情况。并且它在 HTML5 中得到支持，HTML5 的不断发展有助于引入一个有趣的工具。

语法：

这个进度元素有开始和结束标签，下面显示了标签的基本语法。它意味着任何进程的状态。进度条内嵌显示方式。

<Progress bar>
……
</Progress bar>

属性

属性提供了一个信息元素，就像 HTML 中浏览器的行为一样。 HTML 中有三个属性：事件属性和全局属性。除了这些属性之外，progress 元素还有两个新属性：

max – 默认值为 1.0，表示完成任务所需的工作总数。

值 – 这指定需要完成多少工作。默认值指定为小于 1.0。在没有 Val 属性的情况下，进度条是不确定的。

进度条的示例包括附加文件、首次加载文档或加载网页。

在 HTML 中创建进度条的方法

进度条有两种不同的状态：确定和不确定。对于不确定进度条的情况，您可以为 value 属性分配一个 null 值，这样可以更轻松地设置样式。另一方面，对于确定状态，您定义两个新属性 max 和 value，如下面的示例所示。它使用一些类似运动的外观来用水平条指示任务。如果各自的工作不依赖于任务，则标签已分配。关于浏览器兼容性，它支持除Internet Explorer（部分支持）之外的所有浏览器。根据浏览器兼容性，进度条可能看起来有所不同。本文将重点讨论带有 max 和 Val 属性的 bar 的确定状态。

示例：现在，让我们看看带有 min 和 val 属性的进度条的基本实现。

<!DOCTYPE html>
<html>
<body>
Downloading on process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>
</body>
</html>

输出：

HTML 进度条

1.使用CSS

接下来，我们将了解如何使时尚的进度条在所有平台上看起来一致。为了标记进度条，我们使用值选择器并调整尺寸（例如进度元素的宽度和高度），以创建一个视觉上吸引人的进度条。然而，处理不同的浏览器可能会使这个过程变得复杂。浏览器对任务完成的口径做了一些调整。我们通过应用立体效果使 html 栏看起来更坦率。

示例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>

输出：

HTML 进度条

2.使用盒子阴影和颜色

使用样式表，我们可以通过指定背景颜色、分配高度等向该元素添加样式规则。可以通过应用 rgba() 函数来应用颜色。进度条元素可以用不同的颜色来完成，以更好地显示结果。这是通过属性‘class’来映射的。一般来说，进度条从左向右移动来指示任务，从最初的“0”开始，到达目标后显示结果。

示例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>

输出：

HTML 进度条

注意：不同的浏览器处理栏的方式有些不同。 Chrome 通过替换原生样式来使用 Webkit 样式表。

示例：

进度条 :: – WebKit-Progress-bar

甚至可以使用 class 属性将进度条大小更改为小、中、大。

3.使用跨度

下面的代码是不确定的，显示某些进程正在持续一段时间。

示例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>

输出：

HTML 进度条

4.使用 JavaScript 示例

以下规则必须使用 javascript 完成。创建

如果需要的话，创建一个元素，然后创建一个样式表，最后将它们嵌入在一起。下面的代码显示了 JavaScript 的基本进度条。

示例#1

<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>

输出：

HTML 进度条

示例 #2

<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>

Output:

HTML 进度条

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

Conclusion

Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.

以上是HTML 进度条的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 css chrome less html webkit NULL define if for include using class Length finally Conditional Attribute Event number function default this display background animation embedding

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Scrollbar in HTML Table下一篇：HTML Colspan

查看更多