HTML5 progress和meter控制元件
在HTML5中，新增了progress和meter控制元件。progress控制元件為進度條控制元件，可表示任務的進度，如Windows系統中軟體的安裝、檔案的複製等場景的進度。meter控制元件為計量條控制元件，表示某種計量，適用於溫度、重量、金額等量化的表現。
目錄
1.1 特性
1.2 示例
2.1 特性
2.2 示例
1. <progress> 進度條
說明：表示任務的進度，如Windows系統中軟體的安裝、檔案的複製等場景的進度。
1.1 特性
語法：
<progress value="0.5">50%</progress>
屬性：
max {number} ：設定或獲取進度條的最大值。
預設值：未設定此屬性時，控制元件最大值為1。
value {number} ：設定或獲取進度條的當前值。
預設值：未設定此值時，此進度條為'不確定'型，無具體進度資訊；無max屬性時(進度條預設最高為1)，value的預設取值範圍為0.01~1.0，設定0.2時表示20%的進度。
最低瀏覽器版本支援：IE 10、Chrome 8
控制元件內容：當瀏覽器不支援此控制元件時，將顯示控制元件裡的內容，支援此控制元件的瀏覽器不會展示控制元件的內容。
1.2 示例
示例1：含有value屬性
進度：<progress value="0.25" >25%</progress>
示例2：含有max屬性
進度：<progress max="100" value="25" >25%</progress>
示例3：不確定進度條(無value屬性)
進度：<progress >正在下載...</progress>
IE8 ：顯示文字內容。
IE11 ：顯示一個從左到右的動畫效果。
Chrome ：顯示一個從左到右，然後從右到左的動畫效果。
2. <meter> 計量條
說明：表示某種計量，適用於溫度、重量、金額等量化的表現。
2.1 特性
語法：
進度：<meter value="0.5"></meter>
屬性：
value {number} ：設定或獲取此控制元件的值，必須要在min與max值的中間。
max {number} ：設定此控制元件的最大值。
預設值：未設定此屬性時，控制元件最大值為1。
min {number} ：設定此控制元件的最小值。
預設值：未設定此屬性時，控制元件最小值為0。
low {number} ：設定過底的閾值，當value小於low並大於min時，顯示過低的顏色。
high {number} ：設定過高的閾值，當value大於high並小於max時，顯示過高的顏色。
optimum {number} ：設定最佳值，
最低瀏覽器版本支援：IE 不支援、Chrome 8
控制元件內容：當瀏覽器不支援此控制元件時，將顯示控制元件裡的內容，支援此控制元件的瀏覽器不會展示控制元件的內容。
2.2 示例
示例1：無屬性
進度：<meter></meter>
示例2：value < max(max預設為1.0)
進度：<meter value="0.5"></meter>
示例3：value = max(max預設為1.0)
進度：<meter value="1"></meter>
示例4：value > max(max預設為1.0)
進度：<meter value="5"></meter>
示例5：value < min(min預設為0)
進度：<meter value="-0.5"></meter>
示例6：value = min(min預設為0)
進度：<meter value="0"></meter>
示例7：value > min(min預設為0)
進度：<meter value="0.5"></meter>
示例8：value < high
進度：<meter value="0.5" high="0.8"></meter>
示例9：value = high
進度：<meter value="0.8" high="0.8"></meter>
示例10：value > high
進度：<meter value="0.9" high="0.8"></meter>
示例11：value < low
進度：<meter value="0.1" low="0.25"></meter>
示例12：value = low
進度：<meter value="0.25" low="0.25"></meter>
示例13：value > low
進度：<meter value="0.5" low="0.25"></meter>
示例14：optimum < low < value < high
進度：<meter low="0.25" optimum="0.15" high="0.75" value="0.5"></meter>
示例15：low < optimum = value < high
進度：<meter low="0.25" optimum="0.5" high="0.75" value="0.5"></meter>
示例16：low < value < high < optimum
進度：<meter low="0.25" optimum="0.85" high="0.75" value="0.5"></meter>
示例17：value < low < high < optimum
進度：<meter low="0.25" optimum="0.85" high="0.75" value="0.2"></meter>
示例18：optimum < low < high < value
進度：<meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>
相關推薦
HTML5 progress和meter控制元件
在HTML5中，新增了progress和meter控制元件。progress控制元件為進度條控制元件，可表示任務的進度，如Windows系統中軟體的安裝、檔案的複製等場景的進度。meter控制元件為計量條控制元件，表示某種計量，適用於溫度、重量、金額等量化的表現。 目錄 1.1 特性 1
個性化定義部落格園 (一)---基礎準備以及新增動態背景和音樂控制元件
寫在前面 擁有部落格僅僅只是開始，後續該怎樣美化部落格？怎樣使部落格更有個性？這都需要我們一點點去做。由此，我總結出了一些方法，希望能對你有所幫助。我們將以部落格園美化來教你怎樣自定義部落格，使它看起來更加的個性化。 一，準備工作 我的面板選擇的
Winform下使用ListView控制元件和ImageList控制元件顯示圖片縮圖
一、基本概念 1、ImageList控制元件 ImageList元件，又稱為圖片儲存元件，它主要用於儲存圖片資源，然後在控制元件上顯示出來，這樣就簡化了對圖片的管理。ImageList元件的主要屬性是Images，它包含關聯控制元件將要使用的圖片。每個單獨的圖片可以通過其索引值或鍵值來訪問。
unity3d嵌入到iOS工程（3d物體和iOS控制元件顯示在同一個view上）
最近公司要開發一款用於3d展示的應用，通過在網上拜讀各大神的帖子，終於完美解決此類問題。（unity3d版本2017.3，xcode9.2） 前邊unity3d打包iOS工程的方法在此就不做贅述，其他帖子基本可以解決，本帖直接上乾貨。 1、在打包好的iOS工程中，找到UnityAppCont
微信小程式實現顯示和隱藏控制元件-頭像-取值-bindblur事件
微信小程式實現顯示和隱藏控制元件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: b
VB6.0中如何設定COM元件和ActiveX控制元件的CLSID值
http://ajxfxb.blog.163.com/blog/static/56675086200911181118562/ VB中如何設定COM元件和ActiveX控制元件的CLSID值 2009-12-18 11:01:08| &nbs
Android : 事件分發,以及消除子控制元件和父控制元件互相的影響
效果圖 消除在上下滑的時候讓下面的listview控制元件不進行滑動 如題,先上xml的程式碼 父控制元件listview <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.Con
04 在地圖上新增主頁、定位、鷹眼圖和比例尺控制元件
在上一篇文章中我們學習瞭如何建立一個簡單的地圖，那接下來，我們學習如何給建立好的地圖上新增一些基本的空間，最終效果如下圖所示： 由上圖可以看出，我們在地圖上添加了主頁、定位、鷹眼圖以及比例尺控制元件，下面將詳細介紹如何新增： 1 主頁按鈕的新增 新增主頁按鈕的前提是
C# wpf StackPanel控制元件和Border 控制元件 進行基本佈局（2）
1新建一個wpf 程式，去掉grid,控制元件，新增StackPanel控制元件，在新增4個button按鈕，如下圖所示， 分析程式碼，Orientation有2個屬性，1個屬性是Vertical 代表是縱向排列。HorizontalAlignment 代表縱向排列位置，有4個屬性，l
Yii 日期和時間控制元件的使用
1、關於日期控制元件，Yii內建擴充套件(zii)中有CJuiDatePicker，使用例子如下：[php] view plain copy print?<code class="language-php"> <div class="Input">
事件分發,以及消除子控制元件和父控制元件互相的影響
效果圖 消除在上下滑的時候讓下面的listview控制元件不進行滑動 如題,先上xml的程式碼 父控制元件listview <?xml version="1.0" encoding="utf-8"?> <android.support.
TiemPicke 和 DatePicker控制元件 自定義大小
原文如下： http://blog.csdn.net/g707175425/article/details/47044811 由於沒有ViewHelper縮放控制元件，做了如下修改： import android.support.v4.view.ViewCompat; … … V
Android開發第三方庫glide和圓形控制元件circleimageview一起使用第一次進入無法顯示問題
在使用glide載入圓形頭像,圓形頭像使用控制元件circleimageview,發現第一進入頭像根本不會顯示,後來使用android v4包提供的RoundedBitmapDrawableFactory完美的解決了這個問題,在使用RoundedBitmapDr
Wijmo:使用Angular2建立HTML5/TypeScript的輸入控制元件
從2016 v1版本開始，Wijmo UI控制元件支援Angular 2。Wijmo 2016 v1強勢釋出，全面支援Angular 2!本文就來介紹使用Angular2來建立基於HTML5/TypeScript的輸入控制元件。 步驟： 1. 使用Vi
Android-防止使用者快速點選和多控制元件點選
原地址簡書：http://www.jianshu.com/p/9d7df1895b72 1.為什麼要防止使用者重複點選 在使用者使用App的時候，並不會乖乖的按照我們的想法而執行。 下面就拿我們熟悉的Button來： 舉個栗子 假設這個Button的點選
CHtmlView 和 Webbrowser 控制元件中超連結點選事件的獲取與檢測
本文轉自：http://live.aulddays.com/tech/08/chtmlviewlinkclick/ 在自己的程式中使用 CHtmlView 或直接嵌入 Webbrowser 控制元件顯示網頁時，常常需要獲取網頁元素的一些事件，以實現對網頁顯示的控制或與網
Android_關於子控制元件和父控制元件的事件響應問題
當父控制元件中有子控制元件的時候，並且父控制元件和子空間都有事件處理（比如單擊事件）。這時，點選子控制元件，父控制元件的單擊事件就無效了。如下圖： 比如一個LinearLayout裡面有一個子控制元件TextView，但是TextView的大小沒有LinearLayout大 ①如果LinearLayout和
c#操作webbrowser中網頁的iframe頁面的javascript函式和觸發控制元件事件或者直接執行js函式
1. 操作webbrowser中網頁的iframe頁面的javascript函式和觸發控制元件事件 HTMLIFrame fe = webBrowser1.Document.GetElementById("iframe id").DomElement as HTMLIFr
Asp.net img標籤和image控制元件的區別
在網頁開發中，要顯示一個圖片，有兩種選擇：第一種是使用HTML直接支援的img標籤，設定其src屬性。第二種是使用image這個伺服器控制元件，設定其imageurl屬性。 在很多時候，他們都沒有什麼大的區別。我們通常都建議使用Img標籤。 有一個時候，可能用Image控制元件能解決一個棘手的問題。因為Im
C#用serialPort和chart控制元件實現簡單波形繪製
先看最終的效果圖： 主要實現功能是將串列埠傳送過來的資料按波形顯示 注：本例是以串列埠除錯助手和虛擬串列埠VSPD軟體模擬串列埠傳送資料的，詳細說明見下文 說明： serialPort的ReadByte()方法用於從System.IO.Ports.SerialPort輸入