您好,登錄后才能下訂單哦!
這篇文章主要介紹了js創(chuàng)建動態(tài)加載進度條的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
進度條可以用來描述正在執(zhí)行的任何任務(wù)的進度,它通常會被用于顯示下載和上傳時的狀態(tài)。換句話說,進度條可以用來描述正在進行的任何事情的狀態(tài)。
下面我們就來看看使用JavaScript如何實現(xiàn)動態(tài)加載的進度條?我們需要執(zhí)行以下步驟:
1、為進度條創(chuàng)建HTML結(jié)構(gòu):
下面的代碼中包含兩個名為“Progress_Status”和“myprogressbar”的“div”標簽元素。
<div id="Progress_Status"> <div id="myprogressBar"></div> </div>
2、添加CSS:
下面的代碼用于設(shè)置進度條的寬度和背景顏色以及條形圖中的進度狀態(tài)。
#Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; }
3、添加JavaScript:
下面的代碼使用javascript函數(shù)“update”和“scene”創(chuàng)建一個動態(tài)progess bar(動畫)。
function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; } } }
運行:
這樣的加載樣式有點單調(diào),我們還可以添加數(shù)字標簽以指示用戶在流程中的位置;這需要在進度條內(nèi)部或外部添加新元素,顯示進度狀態(tài)。
4、添加數(shù)字加載樣式
我們可以在JavaScript的else {}語句里在添加一條語句:
element.innerHTML = width * 1 + '%';
就可以實現(xiàn)數(shù)字加載顯示進度狀態(tài)的樣式,運行效果:
感謝你能夠認真閱讀完這篇文章,希望小編分享js創(chuàng)建動態(tài)加載進度條的方法內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。