html进度条选择进度,H5效果篇--进度条的实现
为了演⽰⽅便，在第⼀个例⼦中，我们通过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 = ElementById("prog");
//获得开始按键
var startButt = ElementById("startBtn");
//显⽰的进度百分⽐数值
var val = ElementById("numValue");
}
接下来，当⽤户点了开始按钮后，需要将按钮设置为不可⽤，并且要更新进度条的数值：
startButt.disabled=true;
prBar.value = currProgress;
并且要显⽰出进度条当前完成的百分⽐并显⽰出来，使⽤如下的代码：
val.innerHTML =und((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
{
done = false;
currProgress = 0;
}
最后完成的代码如下：
Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo
var currProgress = 0;
var done = false;
var total = 100;
function startProgress() {
var prBar = ElementById("prog");
var startButt = ElementById("startBtn");
var val = ElementById("numValue");
startButt.disabled=true;
prBar.value = currProgress;
val.innerHTML = und((currProgress/total)*100)+"%";
currProgress++;
if(currProgress>100) done=true;
javascript进度条if(!done)
setTimeout("startProgress()", 100);
else
{
done = false;
currProgress = 0;
}
}
This is a demo to accompany the following tutorial:
Task progress:
0%

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。