如何用html5在网页上设置进度条_随笔

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

我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。

我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。

然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。

这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们预设的时间后显示下载完成。

我们之前已经给p标签和progress标签分别赋予了不同的id，我们需要获取到这两个元素，并将他们赋给两个变量。

我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。

函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载时间。

1、首先进入手机桌面，点击阅读更多；

2、进入阅读页面，点击阅读更多；

3、然后点击齿轮图标；

4、在设置界面中，单击以显示阅读进度；

5、打开“显示阅读进度”开关。

6、开启之后，用户浏览时就能知道自己的浏览进度了。

可以用html5实现，也可以做成gif的图片，你只需要设置为和你程序设置一样的时间然后进度条自动结束就好了。用图片是最好实现，用ps软件就可以制作。

这个的实现，有很多中方法，简单的，是使用 DIV 嵌套，例如：

</div>

100px 代表 100 分， 64px 代表实际的得分

该进度条是100毫秒，+ 1% ，10秒钟后，跳转页面！要改时间的话！改100就好了

欢迎分享，转载请注明来源：内存溢出

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