jquery环形进度条

最新推荐文章于 2023-11-06 11:06:28 发布

阿轲呀

最新推荐文章于 2023-11-06 11:06:28 发布

阅读量371

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41940987/article/details/108593337

版权

这个示例展示了如何利用HTML、CSS和jQuery创建一个环形进度条。通过CSS定义圆环的样式，jQuery控制圆环部分的旋转，动态显示进度百分比。代码中设置了一个定时器，每500毫秒将角度增加30度，当角度超过360度时停止动画，并更新进度条的百分比显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>jquery环形进度条</title>
       <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
       <style>
           .circle {
               width:200px;
               height: 200px;
               position: absolute;
               border-radius: 50%;
               background: #00AACC;
           }
           .pie-left,    .pie-right {
               width: 200px;
               height: 200px;
               position: absolute;
               left:0px;
               right: 0px;
           }
           .left, .right {
               display: block;
               width: 200px;
               height: 200px;
               background: #0cc;
               border-radius: 50%;
               position: absolute;
               left:0px;
               top:0px;
               /*旋转30度*/
               /*transform: rotate(30deg);*/
           }
           .pie-right, .right {
           clip:rect(0,auto,auto,100px);
           }
           .pie-left, .left {
               /*截图工具 top rigt,bottom, left*/
           clip:rect(0,100px,auto,0);
           }
           .mask {
               width:150px;
               height: 150px;
               line-height: 150px;
               border-radius: 50%;
               position: absolute;
               left: 25px;
               top:25px;
               background: #fff;
               text-align: center;
               font-size: 16px;
           }
           .circle-wraps {
               width: 80%;
               margin:auto;
           }
           .circle-wrap {
               display: inline-block;
               margin-left: 200px;
           }
       </style>
   </head>
   <body>
       <div class="circle-wraps">
           <div class="circle-wrap">
           <div class="circle">
               <div class="pie-left">
                   <div class="left"></div>
               </div>
               <div class="pie-right">
                   <div class="right"></div>
               </div>
               <div class="mask"><span></span>%</div>
           </div>
       </div>

       </div>

       <script>
           $(function() {
               var leftContent = document.querySelector(".left");
               var rightContent = document.querySelector(".right");
               var textCircle = document.querySelector(".mask");

               //先是leftContent旋转角度从0增加到180度，
               //然后是rightContent旋转角度从0增加到180度
               var angle = 0;

               var timerId = setInterval(function(){
                   angle += 30;
                   console.log(angle);
                   if(angle > 360){
                       clearInterval(timerId);
                   }else{
                       if(angle > 180){
                           rightContent.setAttribute('style', 'transform: rotate('+(angle-180)+'deg)');
                       }else{
                           leftContent.setAttribute('style', 'transform: rotate('+angle+'deg)');
                       }
                       setPercent(angle);

                   }
               },500);

               function setPercent(angle){
               textCircle.innerHTML = parseInt(angle*100/360) +'%';
               }