jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼

更新時(shí)間：2010年03月11日 16:54:04 作者：

jquery其實(shí)是有個(gè)進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒有用，自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的，因?yàn)樽约旱腏S基礎(chǔ)不是很好。

其實(shí)我本來的計(jì)劃是做網(wǎng)頁設(shè)計(jì)師的，可是沒有人認(rèn)為我設(shè)計(jì)的好，哥到現(xiàn)在還沒有工作，發(fā)泄一下，不多說了。

效果圖

需要用到的圖片：

背景圖片：

進(jìn)度顯示圖片：

網(wǎng)頁結(jié)構(gòu)：

復(fù)制代碼代碼如下:

 
<div id="center"> 
<div id="message"></div> 
<div id="loading"><div></div></div> 
</div> 

css代碼：
代碼

復(fù)制代碼代碼如下:

 
#center{ 
margin:50px auto; 
width:400px; 
} 
#loading{ 
width:397px; 
height:49px; 
background:url(bak.png) no-repeat; 
} 
#loading div{ 
width:0px; 
height:48px; 
background:url(pro.png) no-repeat; 
color:#fff; 
text-align:center; 
font-family:Tahoma; 
font-size:18px; 
line-height:48px; 
} 
#message{ 
width:200px; 
height:35px; 
font-family:Tahoma; 
font-size:12px; 
background-color:#d8e7f0; 
border:1px solid #187CBE; 
display:none; 
line-height:35px; 
text-align:center; 
margin-bottom:10px; 
margin-left:50px; 

JavaScript代碼：
代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
var progress_id = "loading"; 
function SetProgress(progress) { 
if (progress) { 
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div寬度 
$("#" + progress_id + " > div").html(String(progress) + "%"); //顯示百分比 
} 
} 
var i = 0; 
function doProgress() { 
if (i > 100) { 
$("#message").html("加載完畢！").fadeIn("slow");//加載完畢提示 
return; 
} 
if (i <= 100) { 
setTimeout("doProgress()", 100); 
SetProgress(i); 
i++; 
} 
} 
$(document).ready(function() { 
doProgress(); 
}); 
</script> 

您可能感興趣的文章:

相關(guān)文章

js/jquery判斷瀏覽器類型的方法小結(jié)
有些時(shí)候需要根據(jù)瀏覽器來寫樣式，所以要判斷一下瀏覽器類型，百度了一下，才知道JQuery有個(gè)方法直接判斷，并附上原生的js的判斷方法，分享給大家，有需要的小伙伴可以參考下。
2015-05-05
JQuery live函數(shù)
給指定id或class的元素綁定（bind）事件時(shí)，對(duì)于改變或新加的元素，事件不會(huì)起作用，這時(shí)我們就要用live函數(shù)，它可以讓子元素繼承父元素的事件。
2010-12-12
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個(gè)基于JQuery的插件，可以用來緩沖加載圖片。下面介紹這個(gè)插件的使用方法
2014-02-02
jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門效果
這篇文章主要介紹了jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門效果,涉及jquery樣式變換的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
fancybox modal的完美解決(右上的X)
有的時(shí)候我們希望保留右上的X，同時(shí)使用fancybox 的modal模式，怎么辦呢
2012-10-10
jQuery獲取table表中的td標(biāo)簽(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query獲取table表中的td標(biāo)簽(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
利用jQuery中的ajax分頁實(shí)現(xiàn)代碼
這篇文章主要介紹了利用jQuery中的ajax分頁實(shí)現(xiàn)代碼的相關(guān)資料，對(duì)ajax分頁感興趣的朋友可以參考一下
2016-02-02
基于jQuery實(shí)現(xiàn)的幻燈圖片切換
本篇文章分享了基于jQuery實(shí)現(xiàn)的幻燈圖片切換效果的部分代碼。感興趣的朋友可以下載實(shí)例運(yùn)行，下面就跟小編一起來看看吧
2016-12-12
jquery刷新頁面的實(shí)現(xiàn)代碼（局部及全頁面刷新）
jquery刷新頁面的實(shí)現(xiàn)代碼（局部及全頁面刷新），需要的朋友可以參考下。
2011-07-07
Jquery實(shí)現(xiàn)多個(gè)表格的全選復(fù)選框功能方式
這篇文章主要介紹了Jquery實(shí)現(xiàn)多個(gè)表格的全選復(fù)選框功能方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12