javascript 进度条的几种方法

我们先看看最终效果:

[url=169]169[/url]

第一步,基本
构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 

body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 

/*进度条样式*/ 
.progressbar_1{ 
    background-color:#eee; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    color:#222; 

.progressbar_1 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 

</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1>1,构建基本的HTML结构和CSS样式</h1>

0%的状态: 
    <div class="progressbar_1"> 
        <div class="bar"></div> 
    </div>

50%的状态: 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 50%;"></div> 
    </div>

80%的状态: 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 80%;"></div> 
    </div>

100%的状态: 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 100%;"></div> 
    </div>     
    这步非常简单,相信大家都能看明白。 
</div> 
</body> 
</html>

第二步,给进度条增加文字显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 

body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 

/*进度条样式*/ 
.progressbar_1{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 

.progressbar_1 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 

/*绝对定位*/ 
.progressbar_2{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    text-align:center; 
    position:relative; 

.progressbar_2 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
    position:absolute; 
    left:0; 
    top:0; 

.progressbar_2 .text { 
    height:16px; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    line-height:16px; 

/*绝对定位 + z-index */ 
.progressbar_3{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    text-align:center; 
    position:relative; 

.progressbar_3 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:10; 

.progressbar_3 .text { 
    height:16px; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    line-height:16px;

z-index:100; 

</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1>2,给进度条增加文字显示</h1>

一个进度条需要包含对应的进度文字显示,本例中,我希望文字显示在进度条的中间。 
    接下来,我们在进度条元素内增加一个显示 文字的div。

很显然,直接添加div后,div会占据原先绿色进度条的位置。看下面例子:

<div class="progressbar_1"> 
        <div >50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div>

那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢?

估计你也想到了,那就是绝对定位。通过对父元素添加相对定位,然后给子元素添加绝对定位,设置子元素的左边距和上边距都为0。

看下面的例子:

<div class="progressbar_2"> 
        <div class="text">50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div>

这时你会发现文字被遮盖了,相信你第一时间就会想到用 z-index 去设置他们的层级关系。

对,我也选择的是它。通过给他们设置不同的z-index值来确定层级关系,值越大越显示在上面。看下面例子:

<div class="progressbar_3"> 
        <div class="text">50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div>

<div class="progressbar_3"> 
        <div class="text">80%</div> 
        <div class="bar" style="width: 80%;"></div> 
    </div>

<div class="progressbar_3"> 
        <div class="text">100%</div> 
        <div class="bar" style="width: 100%;"></div> 
    </div>

这是第一种方式,也是目前最为流行的 制作进度条的方式。
    他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。 
    接下来我们看第二种方式制作进度条。
</div> 
</body> 
</html> 
他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。 
第三步,制作进度条的第二种方式---直接使用图片+背景图片 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 

body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 

/*不带文字*/ 
.progress{ 
    border:0; 
    width: 152px; 
    height: 18px; 
    background:url(img/progress.gif) no-repeat -100px 50%; 

/*带文字显示*/ 
.progressbar_3{ 
    width:152px; 
    position:relative; 
    height:18px; 
    text-align:center; 
    position:relative; 
    color:#222; 

.progressbar_3 .text{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    line-height:18px; 
    z-index:100; 

.progressbar_3 .progress{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    z-index:10; 

</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1>3,制作进度条的第二种方式---直接使用图片+背景图片</h1>

<img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>

<img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>

<img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>

<img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>

<img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/>

如果你想在上面进度条上添加进度显示的文字,你应该知道怎么办了(如果你仔细阅读过前面的例子的话)。

对,就是使用绝对定位+相对定位来控制。

<div class="progressbar_3"> 
        <div class="text">0%</div> 
        <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/> 
    </div>

<div class="progressbar_3"> 
        <div class="text">20%</div> 
        <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/> 
    </div>

<div class="progressbar_3"> 
        <div class="text">50%</div> 
        <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/> 
    </div>

<div class="progressbar_3"> 
        <div class="text">80%</div> 
        <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/> 
    </div>

<div class="progressbar_3"> 
        <div class="text">100%</div> 
        <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/> 
    </div> 
    这种方式的原理就是 利用 一张img图片,然后给img图片又设置背景图,通过背景图的background position 属性 来显示不同的部分。
    当然这种方式 对图片有点要求 。你仔细一点就会发现,宽度是img的2倍。
    另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。
    总的来说,这应该算一个技巧,在实际项目中,也是能使用的。

<p style="float:right;">Dev By <a href="http://www.huiyi8.com" >huiyi8素材</a></p> 
</div> 
</body> 
</html> 
这种方式的原理就是 利用 一张img图片,然后给img图片又设置背景图,通过背景图的background position 属性 来显示不同的部分。 
当然这种方式 对图片有点要求 。你仔细一点就会发现,宽度是img的2倍。 
另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值,实际可以采用 % 来控制 更精确, 比如: background-position:80% 50%;等。 
总的来说,这应该算一个技巧,在实际项目中,也是能使用的。 
第四步,应用 
最后我们看一个简单的应用: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style> 
*{ 
    margin:0; 
    padding:0; 

body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 
}

/*不带文字*/ 
.progress{ 
    border:0; 
    width: 152px; 
    height: 18px; 
    background:url(img/progress.gif) no-repeat -100px 50%; 

/*带文字显示*/ 
.progressbar_3{ 
    width:152px; 
    position:relative; 
    height:18px; 
    text-align:center; 
    position:relative; 
    color:#222; 

.progressbar_3 .text{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    line-height:18px; 
    z-index:100; 

.progressbar_3 .progress{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    z-index:10; 

</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="gb2312"></script> 
<script> 
$(function(){ 
    var $txt = $(".progressbar_3 .text"); 
    var $progress = $(".progressbar_3 .progress");

$("#addTo").click(function(){ 
        $progress.animate({"backgroundPosition":"-76px 50%"},500,function(){ 
            $(this).attr({"alt":"50%","title":"50%"}); 
            $txt.text("50%"); 
            $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
        }); 
    }); 
    $("#cutdown").click(function(){ 
        $progress.animate({"backgroundPosition":"-120px 50%"},500,function(){ 
            $(this).attr({"alt":"20%","title":"20%"}); 
            $txt.text("20%"); 
            $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
        }); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
    <h1>4,应用</h1>

<div class="progressbar_3"> 
        <div class="text">0%</div> 
        <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/> 
    </div>

<button id="addTo" >增加至50%</button> 
    <button id="cutdown" >减少至20%</button>

我使用的是第二种方式来做控制,通过animate来控制图片的background-position来达到进度条效果。
    当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width 属性。 
    <p style="float:right;">Dev By <a href="http://www.huiyi8.com" >huiyi8素材</a></p>     
</div> 
</body> 
</html> 
通过animate来控制图片的background-position来达到进度条效果。 
当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width 属性。

 通过上文,如果您想要了解安卓软件开发,对安卓软件开发感兴趣,可以登录www.xmgreat.org,点击在线咨询与在线老师交流。您也可以拨打我们的全国免费咨询专线:0592-8260341进行咨询。

时间: 11-18

javascript 进度条的几种方法的相关文章

Javascript刷新页面的几种方法:

Javascript刷新页面的几种方法:1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(location)8 document.URL=location.href

Javascript刷新页面的几种方法

Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href 自动刷新页面的方法: 1.页面自动刷新:把如下代码

Android自定义控件:进度条的四种实现方式

前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源码在最后) 最近一直在学习自定义控件,搜了许多大牛们Blog里分享的小教程,也上GitHub找了一些类似的控件进行学习.发现读起来都不太好懂,就想写这么一篇东西作为学习笔记吧. 一.控件介绍: 进度条在App中非常常见,例如下载进度.加载图片.打开文章.打开网页等等--都需要这么一个效果让用户知道我们的App正在读取,以构造良好的

Javascript异步编程的4种方法

转自 阮一峰 http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 作者: 阮一峰 日期: 2012年12月21日 你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境

javascript中数组的22种方法 (转载)

前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

javascript中数组的22种方法

× 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和val

JavaScript数组去重的四种方法

今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 = function(){                var temp = [];        for(var i=0; i < this.length; i++){            if(temp.indexOf(this[i]) == -1){                tem

Javascript进度条

一个简单的进度条演示. <!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%&quo

javascript 显示对象的三种方法

以前发了个调试javascript时显示复杂对象的方法,有同学说为什么不用JSON.stringify(obj) 呢,有同学说用console.log(obj),为搞清楚这个问题,我试验了下这3个方法并做了比较,比较结果见图,代码在下面. 有几点说明下:1.从 ECMAScript 5th Edition 开始,JavaScript 内建了 JSON 对象,不用引js文件.2.alert(JSON.stringify(window)),会报TypeError: cyclic object val