javascript图片加载配合html5的progress进度条

作者：袖梨 2022-06-25

下面我们开始一步步实做这个效果：

1.创建HTML5 页

首先创建基本的HTML 5基本框架页

代码如下	复制代码

2.增加进度条标签
首先，在body部分，添加如下的进度条的标签：

代码如下	复制代码
1

HTML 5中的进度条使用的是标签，在这里，设置了开始的值value为0，最大的值为100，当任务完成后，进度条的值就会变成100了。我们将通过Javascript去更新这个值，所以以上的标签只是对进度条进行了初始化工作。

3. 点击按钮的编写
现在，我们开始编写点击按钮的事件，代码如下：

代码如下

复制代码

其中startProcess()的代码如下：

代码如下	复制代码
//当前进度 var currProgress = 0; //进度条是否完成 var done = false; //进度条计数的最大数值 var total = 100;

在声明了上面的变量后，就可以编写startProgress()方法了，代码如下：

代码如下	复制代码
function startProgress() { //获得进度条的标签 var prBar = document.getElementById("prog"); //获得开始按键 var startButt = document.getElementById("startBtn"); //显示的进度百分比数值 var val = document.getElementById("numValue"); }

接下来，当用户点了开始按钮后，需要将按钮设置为不可用，并且要更新进度条的数值：

代码如下

复制代码

startButt.disabled=true;

prBar.value = currProgress;

并且要显示出进度条当前完成的百分比并显示出来，使用如下的代码：

代码如下	复制代码
val.innerHTML =Math.round((currProgress/total)*100)+"%";

接着就可以对进度条的数字进行累加了：

代码如下	复制代码
currProgress++;

并且要判断如果进度数值达到100的话，则停止，设置done=false的标识，否则每0.1秒通过Javascript的setimeout方法进行延时，如下：

代码如下	复制代码
if(currProgress>100) done=true; //如果还没到进度条100的数值，则继续累加 if(!done) setTimeout("startProgress()", 100); //如果进度条已经达到100的数值，则重新设置按钮可用，重新设置currProgrss=0 else { document.getElementById("startBtn").disabled = false; done = false; currProgress = 0; }