HTML5中progress進(jìn)度條的使用示例

這篇“HTML5中progress進(jìn)度條的使用示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML5中progress進(jìn)度條的使用示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

HTML5 progress 元素簡(jiǎn)介

progress是HTML5的一個(gè)新元素，表示定義一個(gè)進(jìn)度條，用途很廣泛，可以用在文件上傳的進(jìn)度顯示，文件下載的進(jìn)度顯示，也可以作為一種loading的加載狀態(tài)條使用。

html5 progress進(jìn)度條語(yǔ)法

點(diǎn)擊這里查看html5 progress進(jìn)度條的樣子。

html5 progress 屬性

progress max

max屬性表示進(jìn)度條的進(jìn)度最大值，如果有此值，必須是大于0的有效浮點(diǎn)數(shù)。max的默認(rèn)值是1.

progress value

value屬性表示進(jìn)度條完成的進(jìn)度之，value值的范圍為0~max之間。如果沒有設(shè)置max屬性，那么value屬性值的范圍要在0~1之間。

如果沒有value值，那么完成進(jìn)度是不確定的。這時(shí)候表示任務(wù)正在進(jìn)行中，但不知道多長(zhǎng)時(shí)間可以完成。這時(shí)候的progress在webkit瀏覽器中我們可以用作loading來使用，表示正在頁(yè)面加載中，或者ajax請(qǐng)求后臺(tái)數(shù)據(jù)中。

上圖截自chrome瀏覽器。

沒有設(shè)置value值的progress就像一個(gè)加載中l(wèi)oading，中間的進(jìn)度塊來回游蕩。

沒有value的progress在window7下的模樣如下圖：

確實(shí)有點(diǎn)丑，不過是繼承了windows的典型風(fēng)格。

html5 progress兼容性

progress在IE10+瀏覽器都支持

html5 progress 進(jìn)度效果展示

progress動(dòng)畫效果模擬代碼如下：

<progress value="0"  max="100">您的瀏覽器不支持progress元素</progress>
<br/><br/>
<input type="button" value="開始" onclick="goprogress()"/>
<script>
    function goprogress(){
        var pro=document.getElementsByTagName("progress")[0];
        gotoend(pro,0);
    }
    function gotoend(pro,value){
        var value=value+1;
        pro.value=value;
        if(value<100) {
            setTimeout(function(){gotoend(pro, value);},20)
        }else{
            setTimeout(function(){alert("任務(wù)完成")},20);
        }
    }
</script>

點(diǎn)擊這里查看progress動(dòng)畫模擬。

html5 progress相關(guān)樣式設(shè)置

我們以實(shí)現(xiàn)一個(gè)progress的自定義樣式為例子，來講述progress有哪些樣式可以供我們?cè)O(shè)置。

我們要把progress改變成上面這種模樣。

代碼如下：

<progress value="20" class="mypro"  max="100">
    您的瀏覽器不支持progress元素
</progress>
 
.mypro{
    background:orange;
    border:1px solid red;
    border:2px solid #000;
    width:300px;
    height:50px;
    -webkit-appearance: none;
 }
::-ms-fill{
    background:deeppink;
}
::-moz-progress-bar{
    background:deeppink;
 }
::-webkit-progress-bar{
    background:orange;
 }
::-webkit-progress-value{
    background:deeppink;
 }

progress可以設(shè)置width，height，border等常用屬性。

對(duì)于IE10+，firefox瀏覽器，可以用background設(shè)置進(jìn)度條的背景色。

對(duì)于webkit瀏覽器，使用::-webkit-progress-bar設(shè)置進(jìn)度條的背景色。

對(duì)于IE10+，用::-ms-fill設(shè)置進(jìn)度條完成進(jìn)度的背景色。

對(duì)于firefox，用::-moz-progress-bar設(shè)置進(jìn)度條完成進(jìn)度的背景色。

對(duì)于webkit瀏覽器，使用::-webkit-progress-value設(shè)置進(jìn)度條完成進(jìn)度的背景色。

注意：::-webkit-progress-bar設(shè)置的是進(jìn)度條的背景色，而::-moz-progres-bar設(shè)置的是進(jìn)度條完成進(jìn)度的背景色，正好是反著的。

       而且對(duì)于webkit瀏覽器，在IOS上要用-wekbit-appearance:none來清空progress的默認(rèn)樣式，才能讓背景色，進(jìn)度顏色起作用。

點(diǎn)擊這里，查看自定義progress進(jìn)度條樣式。

html5 progress結(jié)語(yǔ)

我們可以在ajax2上傳文件中，upload.onprogress事件回調(diào)中使用progress可以很方便的顯示文件上傳的進(jìn)度。也可以在FileReader預(yù)覽圖片中使用的onprogress事件中使用progress元素顯示圖片讀取的進(jìn)度。

感謝你的閱讀，希望你對(duì)“HTML5中progress進(jìn)度條的使用示例”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！