html5中的进度条简介-凯发app官方网站

dodolovely 的小窝

凯发app官方网站首页　| 　博文目录　| 　关于我

zm_wl

博客访问： 627691
博文数量： 79
博客积分： 2616
博客等级：少校
技术积分： 1036
用户组：普通用户
注册时间： 2010-11-28 17:41

个人简介

苏北下邳附近人氏，跟项羽、刘邦老乡，吕布很不幸，死在俺家门口那块小麦田上。爱好家乡的小麦煎饼、盐豆子！新浪微博：@dodolovely

文章分类

全部博文（79）

html5（1）
python（0）
历史（1）
it（4）
诙谐那些事（6）
体育（0）
english study（1）
java（1）
tools use（4）

outlook（1）

c-free（0）

sublime text 2（0）

db2（0）

connectify（0）

mq（1）

cygwin（1）

vi（1）
励志（2）
linux/unix（40）

mac os（1）

shell（10）
windows（7）
c语言（12）
未分配的博文（0）

文章存档

2013年（2）

2012年（67）

2011年（1）

2010年（9）

我的朋友

相关博文

html5中的进度条简介

分类： python/ruby

2012-08-08 11:53:48

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

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

1）创建html5 页

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

>
<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中的进度条使用的是标签，在这里，设置了开始的值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;
}

最后完成的代码如下：

>
<html>
<head>
<title>developer drive | displaying the progress of tasks with html5 | demotitle>
<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 html5a>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>

来自：51cto

阅读(1793) | 评论(0) | 转发(0) |

下一篇：2012年8月编程语言排行榜-c领衔称霸obj-c强势爬升

给主人留下些什么吧！~~

| | | | |

感谢所有关心和支持过chinaunix的朋友们