html5进度条

最新推荐文章于 2024-06-09 09:49:42 发布

吴杼恩

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量613

点赞数 1

分类专栏： CSS3/html5/less 文章标签： html5 进度条

CSS3/html5/less 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> <head>
  <meta charset="gbk" />
  <title> progress元素的使用</title>
</head>

<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载" οnclick="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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吴杼恩

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5进度条

progress元素的使用开始下载var intValue=0; var intTimer; var objPro=document.getElementById('proDownFile'); var objTip=document.getElementById('pTip');//定时事件 function Interval_handler(){ in
复制链接

扫一扫