No 13 · js写的进度条

来源：互联网发布：值得买自动采集源码编辑：程序博客网时间：2024/05/16 17:52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div style="float:left;"><input type="text" id="myPro"  disabled="disabled"  style=" background-color:red; width:0px;  display:none; border:0;" /></div><div><span id="myNum"></span></div><br /><input type="button" id="start"  value="增加" onclick="pro();" /><input type="button" id="stop" value="减少"  onclick="reduce();" /><script type="text/javascript"> var intervalID; function pro() {  document.getElementById("myPro").style.display="block";  var inputWidth=document.getElementById("myPro").style.width;  var width=inputWidth.substring(0,inputWidth.indexOf('p'));  var changeWidth=parseInt(width)+5;  var percent=(parseInt(width)/5);  document.getElementById("myPro").value=percent+"%";  if(changeWidth>500)  {   window.clearInterval(intervalID);  }  else  {   document.getElementById("myPro").style.width=changeWidth+"px";   window.clearInterval(intervalID);   intervalID=setInterval("pro()",100);  } } function reduce() {  document.getElementById("myPro").style.display="block";  var inputWidth=document.getElementById("myPro").style.width;  var width=inputWidth.substring(0,inputWidth.indexOf('p'));  var changeWidth=parseInt(width)-5;  var percent=(parseInt(width)/5);  document.getElementById("myPro").value=percent+"%";  if(changeWidth<0)  {   window.clearInterval(intervalID);   document.getElementById("myPro").style.display="none";  }  else  {   document.getElementById("myPro").style.width=changeWidth+"px";    window.clearInterval(intervalID);   intervalID=setInterval("reduce()",100);  } }</script></body></html>