codecamp

HTML progress

HTML progress

progress元素可用于指示任务的逐渐完成。它有两个局部属性: value,max,form

value属性定义当前进度,它在零和max属性的值之间

当省略max属性时,比例在0和1之间。使用浮点数表示进度,例如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>


HTML object
HTML Meter
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }