<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{width:200px;height:200px;margin:10px auto;position:relative;} .box div{position:absolute;top:0;left:0;border-radius:50%;height:160px;width:160px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;} .box .bg{border:silver 20px solid} .box .bg2{border:silver 20px solid;clip:rect(0,100px,200px,0);} .box .rount{border:green 20px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);} .box .rount2{border:green 20px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none} .box .num{font:bold 24px/160px tahoma;text-align:center;color:green;top:20px;left:20px;z-index:9;} .points{width:200px;margin:10px auto;text-align: center;} </style> <script src="../jquery-1.7.2.js"></script> <script> $(function(){ var points = $(\'#points\'), rount = $(\'#rount\'), rount2 = $(\'#rount2\'), num = $(\'#num\'); points.change(function(){ var n =points.val(); num.text(n + \'%\'); if(n<=50){ rount.css(\'-webkit-transform\',\'rotate(\' + 3.6*n + \'deg)\'); rount2.css(\'display\',\'none\'); }else{ rount.css(\'-webkit-transform\',\'rotate(180deg)\'); rount2.css(\'display\',\'block\'); rount2.css(\'-webkit-transform\',\'rotate(\' + 3.6*(n-50) + \'deg)\'); } }) }) </script> </head> <body> <div class="box"> <div class="bg"></div> <div id="rount" class="rount"></div> <div class="bg2"></div> <div id="rount2" class="rount2"></div> <div id="num" class="num">0</div> </div> <div class="points"> <span>0</span> <input type="range" id="points" min="0" max="100" step="1" value="0"> <span>100</span> </div> </body> </html>
测试结果：