倏忽有需求要做一个圆环的音频播放进度条（上图结果），本身揣摩尝试了半天，也没有完成。末了度娘一下，才晓得css另有一个clip属性，圆满完成需求。分享一下，说不定能帮别的小伙伴。至于有没有用，那就不晓得了，who care！OK，费话打住，Let’s go!

CSS clip 属性

  先简朴相识一下css clip属性

申明

clip 属性剪裁相对定位元素。这个属性用于定义一个剪裁矩形。关于一个相对定义元素，在这个矩形内的内容才可见。出了这个剪裁地区的内容会依据 overflow 的值来处置惩罚。

能够值

值	形貌
shape	设置元素的外形。唯一正当的外形值是：rect (top, right, bottom, left)
auto	默认值。不运用任何剪裁。
inherit	划定应当从父元素继续 clip 属性的值。

泉源 w3school

运用

  实在道理就是：经由过程剪裁使一个正方形div只显示右半部份，再经由过程剪裁在这个div里做一个带边框（边框大小就是进度条的大小）的左半圆，由于div只显示右半部份，恰好将这个半圆剪裁掉了也就看不到了。然后连系rotate让这个半圆扭转，就完成了50%内的进度条，当凌驾50%时，作废对div的剪裁，再运用一个半圆来保留50%的进条，就完成一个100%的进度条结果。贴上代码，然后再对症结代码用诠释诠释。

/*Css部份*/
.circleProgress_wrapper{/*设置圆环的大小*/
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    cursor: pointer;

}
.slice{ /*这是一个裁去了左半部份，只显示右半部份的div*/
    position: absolute; /*必需是相对定位元素，clip属性才会有用*/
    width: 100%;
    height: 100%;
    clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100裁剪出右半部*/
}
.slice.gt50{/*当进度凌驾50%时，作废剪裁*/
    clip:rect(auto,auto,auto,auto);
}
.bar,.fill{ /*两个只显示左半部份的半圆*/
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 4px rgba(255, 249, 0, 0.77) solid;/*设置进度条大小和色彩值*/
    border-radius: 50%;
    clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*当进度凌驾50%时，让fill扭转180度添补50%*/
    transform: rotate(180deg);
}

<!--html 部份 -->
<div class="circleProgress_wrapper">
    <div id="slice_wrapper" class="slice">    
        <div class="bar pre50"></div>
        <div class="fill"></div>
    </div>
</div>

//javscript部份
<script type="text/javascript" src="src/audioPlayPlugin.js"></script>
<script>
var bar=document.querySelector(".slice>.bar"),
    process=0,
    circleProgress=document.querySelector(".circleProgress_wrapper"),
    slice=document.getElementById("slice_wrapper");
var audio=new audioController({ //建立一个音频对象
        src:"file/test1.mp3",
        "timeupdate":function(){//监听timeupdate事宜，也就是音频当前播放进度发作转变相应的事宜
            /*
            *audio.getAttr("currentTime" 猎取当前播放的时候 s
            *audio.getAttr("duration") 猎取音频时长
            *它们的比恰好就是当前播放进度
            *再乘以360转换为进度条应当扭转的角度
            */
            process=audio.getAttr("currentTime")/audio.getAttr("duration")*360;
             parseInt(process)===180&&addClass(slice,"gt50");//当即是50%时，运用fill占满50%的进度条
              bar.style="transform:rotate("+(process)+"deg)";//依据播放进度设置更新进度条
            }
        }
    });
circleProgress.addEventListener("click",function(){ //点击播放
     if(audio.getAttr("paused")){                             
         audio.play()
     }else{
         audio.pause()
     }
 });
 function addClass(element,className){/*增加类名，完全代码已省略*/
    ...
 }

</script>

  完全的Demo,这里用了我写一个audioPlayPlugin.js,对audio标签的经常使用操纵进行了一些简朴的封装。github地点,coding地点

  末了，有啥我没说清晰或者说错了的，迎接人人留言，人人一同进修，共同进步么。