Question

我有这个HTML：

<head>
  <script language=JavaScript></script> 
</head>
<body>
  <progress value="0" max="100" id=p1></progress>
  <input type=button value='Increse' onClick='incr();'>
  <div id="numValue">0%</div>
</body>
</html>

使用此源代码：

<script language=JavaScript> 
  <!--
  function incr() { 
    var v1=document.getElementById('p1').value;
    document.getElementById("p1").value= v1 + 5;
    var val = document.getElementById("numValue");
  }
  //-->
</script>

我不知道如何更新numValue文本指示器以在进度条完成时向我显示进度值。

Answer 1

在var val = document.getElementById("numValue");

之后添加以下代码

val.innerHTML = v1 + 5+'%'

Answer 2

 function incr() { 
   var v1=document.getElementById('p1').value;
   document.getElementById("p1").value= v1 + 5;
   var val = document.getElementById("numValue");
   document.getElementById("numValue").innerHTML = (v1 + 5) + "%"

}

但是最好这样写：

 function incr() { 
  var progress = document.getElementById('p1');
  var numValue = document.getElementById("numValue")
  var newValue = progress.value + 5;
  progress.value = newValue;
  numValue.innerHTML = newValue + "%"

}

Answer 3

为什么不使用jquery？

使用jquery可以做到这一点：

$(document).ready (function (){
  function incr ()
  {
     $('#numValue').val ($('#p1').val ()+5+'%');
 }
     $('input [type="button"]').click (function (){incr ();});
});

如何更新文本指示器以从进度条显示进度？

3 个答案: