H5效果篇--进度条的实现

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

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

1)创建HTML5 页

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

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
 
</script> 
</head> 
<body> 
 
</body> 
</html> 

2) 增加进度条标签

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

<p>Task progress:</p> 
<progress id="prog" value="0" max="100"></progress>

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

3) 点击按钮的编写
现在,我们开始编写点击按钮的事件,代码如下:

<input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
<div id="numValue">0%</div>

其中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; 
} 

最后完成的代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo</title> 
<script type="text/javascript"> 
var currProgress = 0; 
var done = false; 
var total = 100; 
 
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++; 
if(currProgress>100) done=true; 
if(!done) 
    setTimeout("startProgress()", 100); 
else     
{ 
    document.getElementById("startBtn").disabled = false; 
    done = false; 
    currProgress = 0; 
} 
} 
</script> 
</head> 
<body> 
 
<p>This is a demo to accompany the following tutorial: <a href="http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5">Displaying the Progress of Tasks with HTML5</a></p><hr/> 
 
<p>Task progress:</p> 
<progress id="prog" value="0" max="100"></progress>  
<input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
<div id="numValue">0%</div> 
 
</body> 
</html> 
    原文作者:风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000000514946
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞