本篇文章給大家分享的是有關(guān)HTML5中 progress和meter控件如何使用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)擁有十多年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、重慶APP開(kāi)發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、空間域名等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

在HTML5中，新增了progress和meter控件。progress控件為進(jìn)度條控件，可表示任務(wù)的進(jìn)度，如Windows系統(tǒng)中軟件的安裝、文件的復(fù)制等場(chǎng)景的進(jìn)度。meter控件為計(jì)量條控件，表示某種計(jì)量，適用于溫度、重量、金額等量化的表現(xiàn)。

<progress> 進(jìn)度條

說(shuō)明：表示任務(wù)的進(jìn)度，如Windows系統(tǒng)中軟件的安裝、文件的復(fù)制等場(chǎng)景的進(jìn)度。

特性

語(yǔ)法：

 <progress value="0.5">50%</progress>

屬性：

max{number} ：設(shè)置或獲取進(jìn)度條的最大值。

缺省值：未設(shè)定此屬性時(shí)，控件最大值為1。

value{number} ：設(shè)置或獲取進(jìn)度條的當(dāng)前值。

缺省值：未設(shè)置此值時(shí)，此進(jìn)度條為'不確定'型，無(wú)具體進(jìn)度信息；無(wú)max屬性時(shí)(進(jìn)度條默認(rèn)最高為1)，value的默認(rèn)取值范圍為0.01~1.0，設(shè)置0.2時(shí)表示20%的進(jìn)度。最低瀏覽器版本支持：IE 10、Chrome 8

控件內(nèi)容：當(dāng)瀏覽器不支持此控件時(shí)，將顯示控件里的內(nèi)容，支持此控件的瀏覽器不會(huì)展示控件的內(nèi)容。

示例1：含有value屬性

 進(jìn)度：<progress value="0.25" >25%</progress>

示例2：含有max屬性

 進(jìn)度：<progress max="100" value="25" >25%</progress>

示例3：不確定進(jìn)度條(無(wú)value屬性)

 進(jìn)度：<progress >正在下載...</progress>

IE8：顯示文本內(nèi)容。

IE11：顯示一個(gè)從左到右的動(dòng)畫(huà)效果。

Chrome：顯示一個(gè)從左到右，然后從右到左的動(dòng)畫(huà)效果。

<meter> 計(jì)量條

說(shuō)明：表示某種計(jì)量，適用于溫度、重量、金額等量化的表現(xiàn)。特性

語(yǔ)法：

 進(jìn)度：<meter value="0.5"></meter>

屬性：

value{number} ：設(shè)置或獲取此控件的值，必須要在min與max值的中間。

max{number}：設(shè)置此控件的最大值。

缺省值：未設(shè)定此屬性時(shí)，控件最大值為1。

min{number}：設(shè)置此控件的最小值。

缺省值：未設(shè)定此屬性時(shí)，控件最小值為0。

low{number}：設(shè)置過(guò)底的閾值，當(dāng)value小于low并大于min時(shí)，顯示過(guò)低的顏色。

high{number}：設(shè)置過(guò)高的閾值，當(dāng)value大于high并小于max時(shí)，顯示過(guò)高的顏色。

optimum{number}：設(shè)置最佳值，

最低瀏覽器版本支持：IE 不支持、Chrome 8

控件內(nèi)容：當(dāng)瀏覽器不支持此控件時(shí)，將顯示控件里的內(nèi)容，支持此控件的瀏覽器不會(huì)展示控件的內(nèi)容。

示例1：無(wú)屬性

 進(jìn)度：<meter></meter>

示例2：value < max(max默認(rèn)為1.0)

 進(jìn)度：<meter value="0.5"></meter>

示例3：value = max(max默認(rèn)為1.0)

 進(jìn)度：<meter value="1"></meter>

示例4：value > max(max默認(rèn)為1.0)

 進(jìn)度：<meter value="5"></meter>

示例5：value < min(min默認(rèn)為0)

 進(jìn)度：<meter value="-0.5"></meter>

示例6：value = min(min默認(rèn)為0)

 進(jìn)度：<meter value="0"></meter>

示例7：value > min(min默認(rèn)為0)

 進(jìn)度：<meter value="0.5"></meter>

示例8：value < high

 進(jìn)度：<meter value="0.5" high="0.8"></meter>

示例9：value = high

 進(jìn)度：<meter value="0.8" high="0.8"></meter>

示例10：value > high

 進(jìn)度：<meter value="0.9" high="0.8"></meter>

示例11：value < low

進(jìn)度：<meter value="0.1" low="0.25"></meter>

示例12：value = low

 進(jìn)度：<meter value="0.25" low="0.25"></meter>

示例13：value > low

 進(jìn)度：<meter value="0.5" low="0.25"></meter>

示例14：optimum < low < value < high

 進(jìn)度：<meter low="0.25" optimum="0.15" high="0.75" value="0.5"></meter>

示例15：low < optimum = value < high

 進(jìn)度：<meter low="0.25" optimum="0.5" high="0.75" value="0.5"></meter>

示例16：low < value < high < optimum

 進(jìn)度：<meter low="0.25" optimum="0.85" high="0.75" value="0.5"></meter>

示例17：value < low < high < optimum

 進(jìn)度：<meter low="0.25" optimum="0.85" high="0.75" value="0.2"></meter>

示例18：optimum < low < high < value

 進(jìn)度：<meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>

以上就是HTML5中 progress和meter控件如何使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：HTML5中progress和meter控件如何使用
轉(zhuǎn)載源于：http://www.chinadenli.net/article32/iphssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)