jQuery實現(xiàn)的簡單百分比進度條效果示例
本文實例講述了jQuery實現(xiàn)的簡單百分比進度條。分享給大家供大家參考,具體如下:
一、JS Code:
<script type="text/javascript"> var progressId = "ProgressBarID"; function setProgressBar(progress) { if (progress) { $("#" + progressId + " > div").css("width", String(progress) + "%"); $("#" + progressId + " > div").html(String(progress) + "%"); } } var i_ProgressBar = 0; function doProgressBarLoading() { if (i_ProgressBar > 100) { alert("加載完畢??。?); return; } if (i_ProgressBar <= 100) { setTimeout("doProgressBarLoading()", 10); setProgressBar(i_ProgressBar); i_ProgressBar++; } } function setProgressBarCss() { $("#" + progressId + "").css({ "width": "300px", "height": "25px" }); $("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" }); } $(document).ready(function () { setProgressBarCss(); doProgressBarLoading(); }); </script>
二、Html Code:
<div id="ProgressBarID"> <div> </div> </div>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery實現(xiàn)帶動畫效果的二級下拉導(dǎo)航方法
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的二級下拉導(dǎo)航方法,涉及jQuery操作css樣式及鼠標(biāo)事件的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03jquery實現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
這篇文章主要介紹了jquery實現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼,涉及jquery鼠標(biāo)click點擊事件及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jquery ajax傳遞中文參數(shù)亂碼問題及解決方法說明
本篇文章主要是對jquery ajax傳遞中文參數(shù)亂碼問題及解決方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03利用jQuery實現(xiàn)WordPress中@的ID懸浮顯示評論內(nèi)容
這篇文章主要介紹了使用JavaScript實現(xiàn)WordPress中ID懸浮顯示評論的功能,就是在樓中樓式的評論中顯示被評論的主體內(nèi)容,需要的朋友可以參考下2015-12-12基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼
這篇文章主要為大家介紹了基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼,感興趣的小伙伴們可以參考一下2016-01-01基于jquery的一個OutlookBar類,動態(tài)創(chuàng)建導(dǎo)航條
初學(xué)jquery,如有錯誤,請高手們指出想看效果及完整代碼的可以下載rar包2010-11-11