搜索
您的当前位置:首页正文

HTML5中的进度条progress元素简介及兼容性处理

2023-11-27 来源:莱芜美食
一、progress元素基本了解1.基本UIprogress元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。如下简单code:

1.<progress>o(︶︿︶)o</progress>

是个很带感的进度条吧。有人奇怪:“唉~怎么我看到的是个字符表情捏?” 恩…我只能对你说:“鄙视你,丫的都舍不得用靠谱点的浏览器吗?!”这个默认的效果,不同浏览器下的效果不尽相同,如下截图们(window 7下):

1726.png

IE10颗粒的缓动聚散效果,还是挺让人眼前一亮的。

2.基本属性max, value, position, 以及labels.(1)max指最大值。若缺省,进度值范围从0.0~1.0,如果设置成max=100, 则进度值范围从0~100.(2)value就是值了,若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。什么意思?比方说<progress></progress>没有value,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;但是,一旦有了value属性(即使无值),如<progress value></progress>, 也被认为是确定的,虚点动画进入仙人模式——>变条条了,如下截图:

(3)position是只读属性,顾名思意,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.(4)labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection, 下为我的某测试截图(截自Opera浏览器下,目前FireFox18.0.2以及IE10貌似都不支持)。

二、progress元素兼容性处理示例html代码

1.<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css兼容代码

CSS Code复制内容到剪贴板

1.progress {2. display: inline-block;3. width: 160px;4. height: 20px;5. border: 1px solid #0064B4;6. background-color:#e6e6e6;7. color: #0064B4; /*IE10*/8.}9./*ie6-ie9*/10.progress ie {11. display:block;12. height: 100%;13. background: #0064B4;14.}15.progress::-moz-progress-bar { background: #0064B4; }16.progress::-webkit-progress-bar { background: #e6e6e6; }17.progress::-webkit-progress-value { background: #0064B4; }

基本上完美的解决了各浏览器的差别。

小编还为您整理了以下内容,可能对您也有帮助:

HTML5中的进度条,progress,动态进度条

HTML5新加了一个进度条控件,我们不再需要使用其他脚本库,就可以轻松的创建一个进度条了。下面来详细看下,这个怎么使用。

从图中的代码看,要生成一个进度条十分简单,用progress控件就行了。

按上面的代码运行页面,就可以得到一个标准的进度条了。

progress可以设置二个参数,value和max。 其中max就是进度条的最大值,一般都是设置为100. value就是当前进度的值,我们将value的值设置小一点,比如12,看下结果。

如何显示一个动态的进度条? 我们先写一个js方法,获取到进度条的当前进度,然后在这个当前进度上加1,就会让进度条往前移动了,代码如图

然后再加JS代码,添加一个定时器,让定时器每隔600毫秒调用设置进度条的方法,这样就实现了动态的进度条了。

看下运行效果,现在进度条在一点一点的加了。

可以通过修改定时器的间隔时间,改小一点,就会让进度条走得快一点,改大点,就会走得慢。 我们把它改成200: var timer = setInterval("set_progress()",200); 看下效果。

HTML5中的进度条,progress,动态进度条

HTML5新加了一个进度条控件,我们不再需要使用其他脚本库,就可以轻松的创建一个进度条了。下面来详细看下,这个怎么使用。

从图中的代码看,要生成一个进度条十分简单,用progress控件就行了。

按上面的代码运行页面,就可以得到一个标准的进度条了。

progress可以设置二个参数,value和max。 其中max就是进度条的最大值,一般都是设置为100. value就是当前进度的值,我们将value的值设置小一点,比如12,看下结果。

如何显示一个动态的进度条? 我们先写一个js方法,获取到进度条的当前进度,然后在这个当前进度上加1,就会让进度条往前移动了,代码如图

然后再加JS代码,添加一个定时器,让定时器每隔600毫秒调用设置进度条的方法,这样就实现了动态的进度条了。

看下运行效果,现在进度条在一点一点的加了。

可以通过修改定时器的间隔时间,改小一点,就会让进度条走得快一点,改大点,就会走得慢。 我们把它改成200: var timer = setInterval("set_progress()",200); 看下效果。

【H5 CSS】【译】progress元素样式

以下是progress的基本标签

根据 w3c 的定义,progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外,它还拥有两个自己的属性

一个进度条有两种状态:不确定和已确定

Google Chrome, Apple Safari , Opera 浏览器都是webkit内核,设置progress element 元素样式基于 -webkit-appearance: progress-bar

设置progress默认样式,一般简单的设置为 -webkit-appearance: none

对 -webkit-progress-value 属性的背景增加动画

对 -webkit-progress-value 选择器使用动画

使用::before 和 ::after 可以在progress元素上展示进度条的百分比或者准确的数字。

原文地址: https://css-tricks.com/html5-progress-element/

【H5 CSS】【译】progress元素样式

以下是progress的基本标签

根据 w3c 的定义,progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外,它还拥有两个自己的属性

一个进度条有两种状态:不确定和已确定

Google Chrome, Apple Safari , Opera 浏览器都是webkit内核,设置progress element 元素样式基于 -webkit-appearance: progress-bar

设置progress默认样式,一般简单的设置为 -webkit-appearance: none

对 -webkit-progress-value 属性的背景增加动画

对 -webkit-progress-value 选择器使用动画

使用::before 和 ::after 可以在progress元素上展示进度条的百分比或者准确的数字。

原文地址: https://css-tricks.com/html5-progress-element/

如何用HTML5制作进度条方法教程

进度条是指网络上文件、上传下载与浏览网页的可视化显示条。用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧

先在body标签里面嵌入一个progress标签,max最大值设置为100,value为20,运行程序,结果如图

运行程序,结果如图

用CSS样式为progress标签设置大小,代码如下图3 运行程序,结果如图

运行程序,结果如图

看上面的运行结果,在CSS样式里面设置了背景颜色为红色,程序显示并无变化,原因是HTML5与各浏览器的兼容性各不相同,那如何来改变兼容性问呢?下面以谷歌浏览器为例: 在CSS样式表增加一组progress::-webkit-process-value{}样式,背景颜色为红色,如图

运行程序,看下结果与前面的有什么不同?

除了改变滑块以后,我们还可以改进整个进度条样式,代码如下图

最后运行程序,就能得到基础的内存条样式了。

用图片做背景,可以让进度条更华丽。

如何用html5在网页上设置进度条?

首先,我们制作的这个进度条并没有后台数据作为支撑,所以是一个靠js实现的一个简单的页面。

我们首先需要新建一个html5的页面,其使用的progress元素实在html5时代才出现的。我们在新建的页面中,输入一个段落标签,一个进度条,一个button按钮。然后,我们需要设置一下进度条显示的进度。value代表从多少开始,max代表到多少结束。我们做的是百分比形式的,应该写成这样的。这些做好之后,我们需要书写两个小的事件,实现原理大体上是鼠标单击下载按钮,开始下载变为正在下载百分之多少,等到达到我们预设的时间后显示下载完成。我们之前已经给p标签和progress标签分别赋予了不同的id,我们需要获取到这两个元素,并将他们赋给两个变量。我们还要将progress的初始值设为0,当鼠标单击的时候,我们以一定的时间为周期调用写好的事件。函数写好之后,我们在浏览器中调试,点击下载按钮之后会在300ms内完成下载时间。

莱芜美食还为您提供以下相关内容希望对您有帮助:

HTML5中的进度条,progress,动态进度条

从图中的代码看,要生成一个进度条十分简单,用progress控件就行了。按上面的代码运行页面,就可以得到一个标准的进度条了。progress可以设置二个参数,value和max。 其中max就是进度条的最大值,一般都是设置为100. value...

如何用HTML5制作进度条方法教程

运行程序,结果如图 用CSS样式为progress标签设置大小,代码如下图3 运行程序,结果如图 运行程序,结果如图 看上面的运行结果,在CSS样式里面设置了背景颜色为红色,程序显示并无变化,原因是HTML5与各浏览器的兼容性各不相同...

【H5 CSS】【译】progress元素样式

根据 w3c 的定义,progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。除了通用的全局属性外,它还拥有两个自己的属性 一个进度条有两种状态:不确定和已确定 Google Chrome, Apple Safari , Opera 浏...

如何用html5在网页上设置进度条?

我们首先需要新建一个html5的页面,其使用的progress元素实在html5时代才出现的。我们在新建的页面中,输入一个段落标签,一个进度条,一个button按钮。然后,我们需要设置一下进度条显示的进度。value代表从多少开始,max代表到...

HTML5中,什么元素用于表示一个任务的完成进度?

用html5的progress标签:&lt;progress value="10" max="200"&gt;&lt;/progress&gt;&lt;br&gt; &lt;progress value="150" max="200"&gt;&lt;/progress&gt;&lt;br&gt;

html5新增标签有啥,常用的给我列一下,谢谢。。。

&lt;progress&gt;定义任何类型的任务的进度。可以使用&lt;progress&gt;标签来显示javascript中耗费时间的函数的进度(内联元素)&lt;time&gt;定义一个日期/时间(内联元素)&lt;audio&gt;定义声音内容。(内嵌元素)audio 元素允许多个 source 元素。source ...

css如何使用:indeterminate选择器

类似地,还有HTML5 &lt;progress&gt;标签,当完成的百分比未知时,进度条(&lt;progress&gt;)可以处于不确定状态。因此,可以具体地说,:indeterminate伪类选择器可以在以下元素中使用:1、复选按钮(&lt;input type="checkbox"&gt;),其...

html5有哪些新特性,移除了那些元素?

progress:用来表示进度条,可通过对其max、min、step等属性进行控制,完成对进度的表示和监事。video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。audio:音频元素,用于支持和实现音频文件的...

简述几种html5的常用标签和新增属性的含义

对可用性有负面影响的:frame\frameset\noframes 产生混淆的:acronym\applet\isindex\dir 同时HTML5也对某些元素进行了重定义,改变了它们的语言内容但表现不变。如b标签、i标签,仍然表示为粗体、斜体,但代表了一段需要被...

如何解决HTML5在老版本IE下的兼容性

HTML5兼容低版本的浏览器:在JS代码中加入 1. &lt;script type="text/javascript"&gt;document.createElement('header');2. document.createElement('nav');3. document.createElement('figcaption');4. document.createElement...

Top