html结合js制作动态进度条

js笔记 专栏收录该内容
24 篇文章 0 订阅

代码来自老师上课时的讲解,所以无法填资源链接
我老师的博客:https://me.csdn.net/dongfuguo
效果展示
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>动态进度条</title>
</head>
<body>
 <label id="number" for="prog"></label>
 <progress id="prog" value="60" max="100"></progress>
 <input type="button" value="start" onclick="start()"/>
 <input type="button" value="stop" onclick="stop()"/>
 
 <script type="text/javascript">
 
  function start(){
   value = parseInt(document.getElementById('prog').value);
   if(value >= 100){value=0;}
   document.getElementById('prog').value = (value+1).toString();
   document.getElementById('number').innerHTML = value.toString();
   t = setTimeout('start()',100); 
  }
  
  function stop(){
   try{
    clearTimeout(t);
   }
   catch(t){
    for(var i = 0; i <= 100; i++){
     document.getElementById('number').innerHTML = i.toString();
     document.getElementById('prog').value = i.toString();
    }
   }
  }
 </script>
</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值