一篇文章教會(huì)你使用JS+CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單加載進(jìn)度條的效果
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
大家好，我是前端進(jìn)階者，今天給大家來做個(gè)小項(xiàng)目，一起來看看吧~
一、前言
我們經(jīng)常在網(wǎng)頁上 ，游戲界面加載時(shí)會(huì)看到加載進(jìn)度條的效果，我們往往會(huì)以為這些加載進(jìn)度條的效果，很難實(shí)現(xiàn)。
今天教大家JS+CSS結(jié)合做簡(jiǎn)單一個(gè)加載進(jìn)度條的效果。
二、項(xiàng)目準(zhǔn)備
軟件：HBuilderX。
三、項(xiàng)目實(shí)現(xiàn)
1. body 創(chuàng)建2個(gè)div，外部div添加id"progress"屬性， 添加 id屬性 。
<div id="progress"><div id="progress-bar"></div></div>
2.設(shè)置progress CSS樣式。
設(shè)置寬度，高度，邊框圓角，超過溢出處理，邊框顏色等等屬性。
#progress {width: 100%;height: 30px;position: relative;background-color: #ddd;border-radius: 10px;overflow: hidden;}
3.設(shè)置progress-bar CSS樣式。
設(shè)置寬度，高度，行高，文字顏色，背景顏色等等屬性。
#progress-bar {background-color: #d9534f;width: 10px;height: 30px;line-height: 30px;position: absolute;text-align: center;color: white;background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-size: 40px 40px;}
4. 設(shè)置 創(chuàng)建兩個(gè)按鈕，添加點(diǎn)擊事件。
<button onclick="start()">開始進(jìn)度</button><button onclick="stop()">結(jié)束進(jìn)度</button>
5.start()方法，添加定時(shí)器。
function start() {t = setInterval(progress, 60);}
6.判斷當(dāng)進(jìn)度條到100%時(shí)，停止定時(shí)器，沒有到達(dá)，再執(zhí)行方法。
function progress() {if (i < 100) {i++;bar.style.width = i + "%";bar.innerHTML = i + " %";} else {clearInterval(t);}}
7. 設(shè)置stop（）方法，移除定時(shí)器， 停止執(zhí)行。
function stop() {clearInterval(t);}
8. 調(diào)用方法，實(shí)現(xiàn)效果。
四、效果展示
1、f12運(yùn)行到chrome瀏覽器。
2、點(diǎn)擊開始進(jìn)度按鈕，加載進(jìn)度。顯示進(jìn)度加載情況。
3、加載到100% 停止定時(shí)器！
4、按鈕結(jié)束進(jìn)度按鈕，停止定時(shí)器。直接從當(dāng)前進(jìn)度停止。
五、總結(jié)
本項(xiàng)目，事件監(jiān)聽遇到的一些難點(diǎn)進(jìn)行了分析及提供解決方案。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
HTML+CSS也可以做出網(wǎng)站頁面的效果，在上面顯示圖片標(biāo)題的地方不能用絕對(duì)定位，于是用的relative定位，這個(gè)地方是布局的核心部分，否則無法將文字放在圖片之上。
此進(jìn)度條是DIV+CSS制作實(shí)現(xiàn)，通過對(duì)DIV寬度按照百分比來實(shí)現(xiàn)百分比進(jìn)度條效果，大家可以將背景美化、邊框美化實(shí)現(xiàn)自己需要的漂亮美化的進(jìn)度條效果。
代碼很簡(jiǎn)單，希望對(duì)你有所啟發(fā)。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行