HTML5进度条progress的使用
HTML5进度条progress的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> progress元素的使用</title> </head> <p id="pTip">开始下载</p> <progress value="0" max="100" id="proDownFile"></progress> <input type="button" value="下载" onclick="Btn_Click();"> <script type="text/javascript"> 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> </body></html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。