如何用js实现正在载入的进度条效果

新建一个html文件，定名为test.html，用于实现进度条的结果。

在test.html页面，利用h1标签建立“正在载入,请稍候...”题目，并利用宽度为40%的table作为进度条的总宽度。

在table的td元素内，再利用一个table标签界说进度条的颜色，而且设置一个id属性，用于下面获得进度条调整其宽度实现动态的结果。

界说一个js函数load()，实现改变id为lpc的table的宽度，设置每次改变2%，代码如下：

要使进度条主动转变，需要利用js中的setTimeout（）按时器，实现每秒钟反复挪用load（）函数，实现动态累加2%的宽度。

设置累加的宽度不跨越100%，即当pc的值大于100时，断根按时器，遏制执行load（）函数，进度条遏制。代码如下：

注：在函数后面利用load()执行函数，启动进度条。

在浏览器运行test.html，查看实现的结果。

可见，当作功实现进度条的结果。

0 条评论