您好,登錄后才能下訂單哦!
這篇文章主要介紹html5實(shí)現(xiàn)簡單進(jìn)度條效果的方法是什么,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
首先我們來了解一下html5實(shí)現(xiàn)簡單動(dòng)態(tài)進(jìn)度條效果的原理。
強(qiáng)大的html5為我們提供了一種新的標(biāo)簽<progress>,這個(gè)標(biāo)簽可以實(shí)現(xiàn)一個(gè)靜態(tài)的進(jìn)度條效果,再通過添加簡單的js代碼,我們就可以實(shí)現(xiàn)進(jìn)度條滾動(dòng)的效果。
下面我們通過簡單的代碼示例來介紹html5實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條的方法。
html5代碼:
<progress max="100" value="0" id="pg"></progress>
<progress>標(biāo)簽的使用很簡單,意義很明確,并且屬性只有以上兩個(gè),max表示需要完成的任務(wù)量,value是目前完成的任務(wù)量(樣式看上圖)。
js代碼:
var pg=document.getElementById('pg'); setInterval(function(e){ if(pg.value!=100) pg.value++; else pg.value=0; },100);
效果圖:
以上的實(shí)現(xiàn)方式不僅更加簡單、更加的語義化,同時(shí)也極大的簡化了我們的代碼,靈活性更高了,所以熟練的使用html5是非常有必要的!
不過html5標(biāo)簽的瀏覽器支持度也是我們需要考慮的一個(gè)問題,下面我們來看看<progress>標(biāo)簽的瀏覽器支持情況。
以上是html5實(shí)現(xiàn)簡單進(jìn)度條效果的方法是什么的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。