H5 progress标记

进度条标记

示例:<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>

 

属性

max 进度条最大值

value 进度条当前值

position 只读属性,value/max 这个值算出来会有很多小数点,需要取整数

 

样式: 进度条样式,FF EDGE CHROME 都不一样,是个灾难

  边框 border:{1px solid gold;} // 这个容易理解,和其它元素边框一样

  背景色:background-color:{white;}// 通用设置

    以下是不同浏览器设定

    color: gold; // 背景色(已经完成的进度) IE的高版本

    progress::-moz-progress-bar { background: gold; }// 背景色(已经完成的进度) 火狐

    progress::-webkit-progress-bar { background: white; }// 背景色(整个进度条的背景) 谷歌
    progress::-webkit-progress-value  { background: gold; }// 背景色(已经完成的进度) 谷歌

 一个简单的示例

1.样式

.processbar {
  height: 30px;         // 进度条高度
  width: 30%;        // 进度条宽度
  border: 4px solid gold;        // 进度条边框
  background-color: red;    // 整个进度条背景色
  color: black;        // 已经完成的进度 IE高版本(10,11)
}

progress::-webkit-progress-bar {
  background-color: red;      // 整个进度条的背景 谷歌
}

progress::-webkit-progress-value {
  background-color: black;   // 已经完成的进度 谷歌
}

progress::-moz-progress-bar {
  background-color: black;  //  已经完成的进度 火狐
}

2.标记

// 进度条

<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>

// 重置
<input type="button" name="" value="重来一次" onclick="resetprocess();" />

3.脚本

<script> 

stepprocessbar();
// 进度条增长
function stepprocessbar() {
  var pb = document.getElementById("processbar");
  pb.value = pb.value + 1;

  // 进度显示label
  var processlabel = document.getElementById("processvalue");
  processlabel.innerText= pb.value + '%';
  processlabel.textContent = pb.value + '%';;// FF 不支持innerText

  if (pb.value < 100) {
    setTimeout(function () {
      stepprocessbar();
    }, 50)
  }
}
// 重置进度条
function resetprocess() {
  var pb = document.getElementById("processbar");
  if (pb.value != 100) return;
  document.getElementById("processbar").value = 0;
  stepprocessbar();
}

</script>

你可能感兴趣的:(H5 progress标记)