用 HTML5 实现倒计时效果，CSS 精准控制时间显示
前言：有时，我们会见一些圆形的进度条，随着进度条的推进，进行倒计时的变化。
若是只实现一个圆环的话，只用border和border-radius就能画出来。
但是这样的圆环不能动，产生进度条效果的重要因素就是得从0 开始变化，而不是一个完整的圆环在旋转。所以，实现的思路如下：
1.把整个圆环分成左右两部分；
2.左右两部分都有半个圆环在旋转，比如先让右边的半圆环，旋转到正好接住了左半部分，然后左边的半圆环开始旋转。
一、实现步骤
1.画右半圆环
首先，应该是一个div包裹着一个div。父div他的宽度应该是子div宽度的一半。这样给子div一个border-radius,给父div一个overflow:hidden,这样正好会是一个半圆。
先实现右半部分，html结构如下：
<div class="circle_process">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
</div>里面的rightcircle是半个圆环，样式如下：
.circle_process{
position:relative;
width:47px;
height:48px;
background:#ffffff;
border-radius:50%;
}
.circle_process .wrapper{
width:24px;
height:48px;
position:absolute;
top:0;
overflow:hidden;
}
.circle_process .rightcircle{
border-top:1px solid #1390eb;
border-right:1px solid #1390eb;
right:0px;
-webkit-animation:circle_right 5s linear infinite;
}
.circle_process .circle{
width:48px;
height:48px;
border:1px solid transparent;
border-radius:50%;
position:absolute;
top:0;
transform:rotate(-135deg);
}2.画左半圆环
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>.circle_process .left{
left:0;
}
.circle_progress .leftcircle{
border-bottom:1px solid #1390eb;
border-left:1px solid #1390eb;
left:0px;
-webkit-animation:circle_left 5s linear infinite;
}3.两个半圆结合在一起
两个半圆结合在就是两个圆并排放，那么这两个半圆一个position:absolute,这样两个半圆浮动在文档流当中，就结合成一个圆。d
4.将两个半圆隐藏掉
如果是要求从0 到完整的一个倒计时，那么我们此时需要把这个圆隐藏掉，我们可以通过transform隐藏掉。因为父级的宽度是子集宽度的一半，所以我们可以计算出，当子集的圆旋转180度的时候，整个圆就不见，全都会通过hidden隐藏在外面。同理可得另一半边圆。
5.动画
一个从0-180度的一个动画。
.rightcircle{
-webkit-animation: circle_right; /*动画名称*/
-webkit-animation-duration: 5s; /*完成一个动画需要的时间*/
-webkit-animation-timing-function: linear; /*动画播放的方式，linear是匀速变化*/
-webkit-animation-iteration-count:infinite; /*动画播放的次数,infinite是无限次数*/
}
@-webkit-keyframes circle_right{
0%{
-webkit-transform:rotate(-135deg);
}
50%,100%{
-webkit-transform:rotate(45deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform:rotate(-135deg);
}
100%{
-webkit-transform:rotate(45deg);
}
}二、添加倒计时数字
<div class="circle_process" ng-click="skipStep()">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
<div style="color:#1390EB;font-size: 14px;position: absolute;top:6px;left:16px;">
<span>{{timeNum}}</span>S
</div>
<div style="color:#1390EB;font-size: 14px;position: absolute;top:22px;left:11px;">
跳过
</div>
</div>三、额外功能
现在，已经实现了一个圆形进度条，利用这个，可以实现倒计时：
//倒计时
$scope.countdown = 6;
function settime(){
if($scope.countdown == 1){
$scope.step = 2;
$scope.stepShow = false;
window.clearTimeout($scope.timer);
$scope.$apply();
return;
}else{
$scope.countdown--;
}
$scope.timer = setTimeout(function(){
settime();
},1000)
$scope.timeNum = $scope.countdown;
$scope.$apply();
}
现在，已经实现了一个圆形进度条，利用这个，可以实现一个小闹钟：
function getTime(){
var date = new Date();
var second = date.getSeconds();
var rightcircle = document.getElementById('rightcircle');
var leftcircle = document.getElementById('leftcircle');
var show = document.getElementById('show');
show.innerHTML = second;
if(second<=30){
rightcircle.style.cssText = "transform: rotate("+ (-135+6*second) +"deg)";
leftcircle.style.cssText = "transform: rotate(-135deg)";
}else{
rightcircle.style.cssText = "transform: rotate(45deg)";
leftcircle.style.cssText = "transform: rotate("+(-135+6*(second-30))+"deg)";
}
}
getTime();
setInterval(function(){
getTime();
},1000)四、参考资料
如何只用CSS做倒计时效果 https://www.jianshu.com/p/938693fd3be2
使用CSS实现圆形进度条 https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html