引用: https://www.cnblogs.com/dom-liu/p/6004375.html
作者原创的和下面修改的刚好左右相反。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS圆环绘制</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> .circle { width: 200px; height: 200px; position: relative; border-radius: 50%; background: red; } .clip_left,.clip_right{ width:200px; height:200px; position: absolute; top: 0px;left: 0px; } .circle_left, .circle_right{ width:200px; height:200px; position: absolute; border-radius: 50%; top: 0px;left: 0px; background: green; } /*出于展示用的改变背景色*/ /*.circle_left{ background: green; } .circle_right{ background: lightblue; }*/ .circle_right,.clip_right { clip:rect(0,auto,auto,100px); } .circle_left , .clip_left{ clip:rect(0,100px,auto,0); } /* *当top和left取值为auto时,相当于0 *当bottom和right取值为auto时,相当于100% */ .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 16px; z-index: 10; } </style> </head> <body> <!--背景圆--> <div class="circle"> <!--左半边圆--> <div class="circle_left"> <div class="clip_left"> </div> </div> <!--右半边圆--> <div class="circle_right"> <div class="clip_right"></div> </div> <div class="mask"> <span>0</span>% </div> </div> <script> $(function(){ function go() { if( $('.mask span').text() <= 50 ){ $('.circle_left').css({ "background":"green", 'z-index':'0' }); $('.circle_right').css({ 'transform':'rotate(0deg)', "background":"green", 'z-index':'0' }); $('.circle_left').css('transform','rotate(-'+($('.mask span').text()*3.6)+'deg)'); }else{ $('.circle_left').css({ 'transform':'rotate(0deg)', "background":"red", 'z-index':'1' }); $('.circle_right').css('transform','rotate(-'+(($('.mask span').text()-50)*3.6)+'deg)'); } } $('.mask span').text('0'); go() setTimeout(function () { $('.mask span').text('25'); go() },2000) setTimeout(function () { $('.mask span').text('50'); go() },4000) setTimeout(function () { $('.mask span').text('75'); go() },6000) setTimeout(function () { $('.mask span').text('100'); go() },8000) }) </script> </body> </html>