进度条 jq

最新推荐文章于 2023-09-27 09:27:03 发布

shl999

最新推荐文章于 2023-09-27 09:27:03 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jq css

本文链接：https://blog.youkuaiyun.com/u014665035/article/details/52573835

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的进度条实现方法，包括HTML结构、CSS样式及jQuery动态更新进度逻辑。通过设置定时器来逐步增加进度条的宽度，实现了动态展示进度的效果。

本文介绍简单的进度条的写法
css部分：

 <style>
        #progress {  background:white;height:20px;border:1px solid green;border-radius: 2px;  }
        #progress span {  height:20px;background:green;text-align:center;display:block;  color:#fff; width:0%;  }
</style>

html部分

这里写代码片<div id="progress"><span></span></div>

jq部分

<script>
  var m=0;
  var time=setInterval(function(){
      m++;
      $("#progress span").css("width",m+"%"); //进度条宽度代码
      $("#progress span").text(Math.round(m)+"%");//进度条文本 
      if(m>=100){
          clearInterval(time); //停止计时器
      }},500); //每500毫秒进行一次计时

</script>