html结合js制作动态进度条

最新推荐文章于 2024-07-19 15:32:49 发布

ease_07

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1.3k

点赞数

分类专栏： js笔记文章标签：进度条

本文链接：https://blog.csdn.net/weixin_44125957/article/details/100609990

版权

js笔记专栏收录该内容

25 篇文章 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>

ease_07

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html结合js制作动态进度条

效果展示<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>动态进度条</title></head><body> <label id="number" for="prog"></label> &l...
复制链接

扫一扫

专栏目录