jquery 簡單的進度條實現(xiàn)代碼
更新時間：2010年03月11日 16:54:04 作者：
jquery其實是有個進度條插件的，叫做jqueryprogressbar.js，可是想練習一下，就沒有用，自己寫了點代碼。這個代碼其實是參考別人的，因為自己的JS基礎不是很好。
其實我本來的計劃是做網(wǎng)頁設計師的，可是沒有人認為我設計的好，哥到現(xiàn)在還沒有工作，發(fā)泄一下，不多說了。
效果圖
需要用到的圖片：
背景圖片：
進度顯示圖片：
網(wǎng)頁結(jié)構(gòu)：
復制代碼 代碼如下:
<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>
css代碼：
代碼
復制代碼 代碼如下:
#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代碼：
代碼
復制代碼 代碼如下:
<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>
您可能感興趣的文章:
相關文章
這篇文章主要介紹了jQuery中remove()方法用法,以三個不同的實例形式分別演示了remove()方法刪除元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了jQuery鼠標懸停內(nèi)容動畫切換效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了jQuery實現(xiàn)的簡單手風琴效果,結(jié)合實例形式分析了jQuery基于事件響應、頁面元素屬性動態(tài)操作實現(xiàn)手風琴效果的方法,需要的朋友可以參考下2018-08-08
這兩天的工作內(nèi)容不多，基本是關于jquery中ajax的。之前一直都是寫的最簡單的ajax請求，并沒關注怎么獲取ajax返回值的問題。2015-08-08
之前本人的工作和學習多以原生js 為主，對jQuery 一直都不是很了解，但jQuery 作為當今最優(yōu)秀的js 類庫之一，必須是要花時間好好學習下的，今天正好蛋疼，讀了里面一些代碼2011-04-04
這篇文章主要介紹了jQuery表單對象屬性過濾選擇器,結(jié)合實例形式詳細分析了jQuery針對表單元素進行屬性過濾操作的具體實現(xiàn)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JQuery控制Radio選中方法,涉及jQuery表單操作及鼠標事件響應的方法,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery xml字符串的解析、讀取及查找方法,涉及jQuery方法針對xml字符串的解析、讀取及遍歷查詢等操作相關技巧,需要的朋友可以參考下2016-03-03
jQuery實現(xiàn)導航樣式布局操作示例【可自定義樣式布局】
這篇文章主要介紹了jQuery實現(xiàn)導航樣式布局操作,可實現(xiàn)基于jQuery的用戶自定義樣式布局與屬性動態(tài)操作相關技巧,需要的朋友可以參考下2018-07-07
jQuery中DOM節(jié)點的刪除方法總結(jié)（超全面）
這篇文章主要介紹了jQuery中DOM節(jié)點的刪除方法,文中介紹的很相信，內(nèi)容包括empty()的基本用法、remove()的有參用法和無參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別，需要的朋友可以參考借鑒。2017-01-01