0
我已经用svg做了一个倒计时的例子，但是我需要一个钟面，它只是一个黑圈，里面充满了我做的倒计时的颜色。在svg倒计时中画一个圆圈
这里是我得到的代码：
var time = 1800;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
\t \t $('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
\t \t if (i == time) { \t
clearInterval(interval);
\t \t \t return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
function secondsToTime(secs)
{
var hours = Math.floor(secs/(60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes/60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {
"m": minutes,
"s": seconds
};
return obj;
}.item {
position: relative;
float: left;
}
.item h3 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h3>0</h3>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>
</g>
</svg>
</div>这是结果我期待的（暗钟面）和倒计时填写出来： 
一我尝试完成我想要的是添加一个名为“circle”的新css类，但它似乎并没有显示出来，当我将它添加到<circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>。
var time = 1800;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
\t \t $('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
\t \t if (i == time) { \t
clearInterval(interval);
\t \t \t return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
function secondsToTime(secs)
{
var hours = Math.floor(secs/(60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes/60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {
"m": minutes,
"s": seconds
};
return obj;
}.item {
position: relative;
float: left;
}
.item h3 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle {
border: 15px solid #03002e;
height: 125px;
border-radius:50%;
width: 125px;
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h3>30 min 00 sek</h3>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>
</g>
</svg>
</div>
多久需要填补100％？ 30分钟？ – jack
@jack它的确如此，但是对于测试，您可以将var time = 1800的值更改为1之类的其他值，并且它会立即填充。 – Mac
你可以使用circle属性'fill：red;'。如果你不喜欢它的外观，那么在动画条背后创建另一个圆。 – jack