簡單進度條JS實現

2021-04-21 11:16:44 字數 1322 閱讀 5223

問題描述:

再開發專案過程中,遇到乙個問題,就是執行乙個過程的時候,這個過程可能比較長,比如查詢,因為查詢的內容比較多,所以在查詢過程中需要給客戶乙個比較好的體驗,所以決定給客戶乙個進度條。

網上搜尋,似乎都並不是很管用,都是什麼檔案上傳之類進度,太過複雜。

問題解決:

在頁面上增加乙個類似如下的

"process" style="display: none";>

"4" align="center" valign="top">

"#006699" size="2" face="宋體">正在查詢中,請稍等...

"text" id="processbars" size=46 />

然後寫乙個js方法實現,只是用了乙個迴圈方法,呼叫的時候會迴圈,

/***進度條

*/var bar = 0;

var line = "||";

var amount = "||";

function processbar()  else 

}function getprocessbar() 

那麼你只要在呼叫查詢這個方法的時候去呼叫上面的 getprocessbar()方法即可,如下

<

tdwidth="100%"

colspan="4"

align="right"

class="textline"

>

<

input

name="querybtn"

type="button"

class="off"

id="querybtn"

onmouseover="change_bg(this)"

onmouseout="change_back(this)"

value="查詢"

onclick="doquery();"

>

<

input

name="clearbtn"

type="button"

class="off"

id="clearbtn"

onmouseover="change_bg(this)"

onmouseout="change_back(this)"

value="重置"

onclick="doclear();"

>

td>

function doquery(strsrc)

當然我們呼叫查詢完之後,會重新提交頁面,就不會再跑那個迴圈方法。

後記:只是個簡單的方法,或許在別的地方不適用,不過在我們這個專案剛好適用,呵呵,簡單就可以~

JS實現簡單網頁進度條

jquery實現簡單網頁進度條 title style 大小和body一樣,蓋住全部內容 loading 和父容器大小一樣 img 載入動畫 通重載入事件來完成網頁載入事件 onreadystatechange 頁面載入狀態改變時的狀態 document.readystate 返回當前文件的狀態 1...

js實現進度條

不多說,直接上 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title progressbar title 6 style 7 11 progress 16 bar 2223 style 2425 head 26 body ...

js實現進度條

出處 1.settimeout和cleartimeout12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3132 3334 3536 3738 3940 4142 效果圖 2.setinterval和clearinter...