如何使用 HTML、CSS 或 JavaScript 创建圆形倒数计时器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29649643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a circular countdown timer using HTML, CSS or JavaScript?
提问by Arun Sivaraj
Currently, I am working on a quiz game and in that, for each question, I wish to place a countdown timer. I got some plugins, but I wish if I could create it myself. What I am trying to create looks like the one in the image below.Can you please tell me how I can do it?
目前，我正在做一个问答游戏，对于每个问题，我希望放置一个倒数计时器。我有一些插件，但我希望我能自己创建它。我正在尝试创建的看起来像下图中的那个。你能告诉我我该怎么做吗？
Is there a way to assign a border to only up to a specified percentage of the perimeter, so that I could give a border, first in full, and then as each second advances, I can keep decreasing/increasing it so that I would get it in the perfect way.
有没有一种方法可以将边框分配给周长的指定百分比，以便我可以首先完整地给出边框，然后随着每一秒的进展，我可以不断减少/增加它，以便我得到它以完美的方式。
The timer I wish to create should look somewhat like this (hope you understand how its blue border will increase every second):
我想创建的计时器应该看起来像这样（希望你明白它的蓝色边框是如何每秒增加的）：
回答by Turnip
Here is something i was playing around with a while ago. It uses a combination of SVG, css transitions and javascript. You should be able to rip it apart and use as a starting point...
这是我之前玩过的东西。它结合了 SVG、css 转换和 javascript。您应该能够将其撕开并用作起点......
/**
* The setTimeout({},0) is a workaround for what appears to be a bug in StackSnippets.
* It should not be required. See JSFiddle version.
*/
setTimeout(function() {
var time = 10; /* how long the timer will run (seconds) */
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() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
}, 0).item {
position: relative;
float: left;
}
.item h2 {
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/1.11.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<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="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>回答by Pik_at
you should look at the jquery plugin Knob https://github.com/aterrien/jQuery-Knob, generated canvas circular input, and set timer behavior like :
您应该查看 jquery 插件 Knob https://github.com/aterrien/jQuery-Knob，生成画布循环输入，并设置计时器行为，如：
var time = 0,
maxTime = 60;
$('#dial').knob({
readOnly : true,
thickness : 0.1,
max : maxTime
});
setInterval(function() {
if(time>maxTime) time = 0;
time++;
$('#dial')
.val(time)
.trigger('change');
}, 1000);
I made a codepen here : http://codepen.io/pik_at/pen/azeYRg
我在这里做了一个代码笔：http://codepen.io/pik_at/pen/azeYRg
