如何使用HTML，CSS或JavaScript創建循環倒數計時器？

Question

目前，我正在開展一個問答游戲，對於每個問題，我希望放置一個倒數計時器。 我有一些插件，但我希望自己可以創建它。 我想要創建的內容看起來像下圖中的那個。你能告訴我怎么做嗎？

有沒有辦法將邊框分配到最多只有指定百分比的周長，這樣我就可以先給出一個邊框，然后隨着每一個進展，我可以繼續減少/增加它以便我得到它以完美的方式。

我希望創建的計時器應該看起來像這樣（希望你了解它的藍色邊框每秒會增加）：

Answer 1

這是我剛才玩的東西。 它使用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> 

JSFiddle版本

Answer 2

你應該看一下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);

我在這里做了一個codepen： http ：//codepen.io/pik_at/pen/azeYRg