点击进度条显示隐藏

最新推荐文章于 2022-11-10 14:46:18 发布

小仙女de成长

最新推荐文章于 2022-11-10 14:46:18 发布

阅读量780

点赞数

分类专栏： javascript以及jquery

博客就当自己记的笔记而已~非常感谢博客大神的帮助，若有无意侵权，请联系我，谢谢

本文链接：https://blog.csdn.net/qq_32963841/article/details/91489578

版权

javascript以及jquery 专栏收录该内容

120 篇文章 2 订阅

订阅专栏

直接上代码

<html>
<head>
  <meta charset="UTF-8">
  <title>进度条测试</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    .progress {
      overflow: hidden;
      height: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      margin-left: 30px;
      background-color: #f7f7f7;
      background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
      background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
      background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
      background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      width:408px;
      margin-right:12px;
    }

    .progress .bar {
      width: 0%;
      height: 100%;
      color: #ffffff;
      float: left;
      font-size: 12px;
      text-align: center;
      align-items: center;
      display: flex;
      justify-content: center;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      background-color: #0e90d2;
      background-image: -moz-linear-gradient(top, #149bdf, #0480be);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
      background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
      background-image: -o-linear-gradient(top, #149bdf, #0480be);
      background-image: linear-gradient(to bottom, #149bdf, #0480be);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: width 0.6s ease;
      -moz-transition: width 0.6s ease;
      -o-transition: width 0.6s ease;
      transition: width 0.6s ease;
    }
  </style>

</head>

<body>
<span id="buttonClick">点击</span>
<div class="progress">
  <div class="bar"></div>
</div>

<script>
  $(function(){
    $("#buttonClick").click(function(){
      for(var i=0;i<=100;i++){
        $(".bar").css("width",i+'%')
       if(i==100){
         setTimeout(function () {
            $(".bar").hide()
         }, 1000);
        } else {
         $(".bar").show()
       }
      }
     })
 })
</script>
</body>
</html>