HTML progress

2018-06-16 16:19 更新

HTML progress

progress元素可用于指示任務(wù)的逐漸完成。它有兩個(gè)局部屬性： value，max，form 。

value屬性定義當(dāng)前進(jìn)度，它在零和max屬性的值之間。

當(dāng)省略max屬性時(shí)，比例在0和1之間。使用浮點(diǎn)數(shù)表示進(jìn)度，例如30％的0.3。

例子

下面的代碼顯示了progress元素和一些按鈕。按下按鈕可更新progress元素顯示的值。

<!DOCTYPE HTML>
<html>
<body>
  <progress id="myprogress" value="10" max="100"></progress>
  <p>
    <button type="button" value="30">30%</button>
    <button type="button" value="60">60%</button>
    <button type="button" value="90">90%</button>
  </p>

  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    var progress = document.getElementById("myprogress");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        progress.value = e.target.value;
      };
    }
  </script>
</body>
</html>


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)