HTml5中progress元素

使用progress标记元素实现进度条效果


<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>使用progress元素title>
  <style type="text/css">
    body{
    font-size:12px}
    p{
      padding:0px;
      margin:0px;
    }
    .inputbtn{
      border:solid 1px #ccc;
      background-color:#eee;
      line-height:18px;
      font-size:12px;
    }
  style>
 head>
 <body>
 <script type="text/javascipt">
  var intValue=0;
  var intTimer;
  var objPro=document.getElementById('proDownFile');
  var objTip=document.getElementById('pTip');
  //定时事件
  function Interval_handler(){
    intValue++;
    objPro.value=intValue;
    if(intValue>=objPro.max){
       clearInterval(intTimer);
       objTip.innerHTML="下载已经完成!";
    }
    else{
    objTip.innerHTML="正在下载中"+intValue+"%";
    }
  }
  //下载按钮点击事件
  function Btn_Click(){
  intTimer=setInterval(Interval_handler,100);
  }
  script>
  <p id="pTip">开始下载p>
  <progress value="0" max="100" id="proDownFile">progress>
  <input type="button" value="下载按钮" class="inputbtn" onclick="Btn_Click()">
 body>
html>

你可能感兴趣的:(HTML5)