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

Question

如题所述

Answer 1

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

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

运行程序，结果如图

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

运行程序，结果如图

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

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

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

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

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