一、前言
我們經(jīng)常在網(wǎng)頁上 ，游戲界面加載時(shí)會(huì)看到加載進(jìn)度條的效果，我們往往會(huì)以為這些加載進(jìn)度條的效果，很難實(shí)現(xiàn)。
今天教大家JS+CSS結(jié)合做簡單一個(gè)加載進(jìn)度條的效果。
二、項(xiàng)目準(zhǔn)備
軟件：。
三、項(xiàng)目實(shí)現(xiàn)
1. body 創(chuàng)建2個(gè)div，外部div添加id""屬性，添加 id屬性 。
2.設(shè)置 CSS樣式。
設(shè)置寬度沒有加載的進(jìn)度條，高度，邊框圓角，超過溢出處理，邊框顏色等等屬性。
#progress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
} 3.設(shè)置-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)擊事件。
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)行到瀏覽器。
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)起來很簡單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。HTML+CSS也可以做出網(wǎng)站頁面的效果，在上面顯示圖片標(biāo)題的地方不能用絕對定位，于是用的定位沒有加載的進(jìn)度條，這個(gè)地方是布局的核心部分，否則無法將文字放在圖片之上。此進(jìn)度條是DIV+CSS制作實(shí)現(xiàn)，通過對DIV寬度按照百分比來實(shí)現(xiàn)百分比進(jìn)度條效果，大家可以將背景美化、邊框美化實(shí)現(xiàn)自己需要的漂亮美化的進(jìn)度條效果。代碼很簡單，希望對你有所啟發(fā)。