html进度条实现原理,HTML5效果：进度条的实现

为了演示方便，在第一个例子中，我们通过Javascript去控制时间从而不断地更新进度，并且允许用户通过点击按钮开始进度条的更新，一旦进度条开始更新，则按钮变得不可点击。如果进度条完成的话，则又可以点击按钮。

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

1)创建HTML5 页

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

2) 增加进度条标签

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

Task progress:

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

3) 点击按钮的编写

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

0%

其中startProcess()的代码如下：

//当前进度

var currProgress = 0;

//进度条是否完成

var done = false;

//进度条计数的最大数值

var total = 100;

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

function startProgress() {

//获得进度条的标签

var prBar = document.getE