如何使用 SVG 或 JavaScript 或 Jquery 设计循环倒数计时器 30 秒？

Question

我正在寻找使用 SVG 或 JavaScript 或 Jquery 的 30 秒循环倒数计时器填充环。我在 Whosebug 中找到了下面的示例，我正在尝试使用函数来实现它，但在使用动画感觉环时遇到问题。我不能在 30 秒之前再次启动我的计时器，因为它显示之前的环填充。请建议。工作 Jsfiddle http://jsfiddle.net/qZrgS/90/

Jquery

$scope.startTimer = function(){
 var time = 30;
 var initialOffset = '220';
 var i = 1
 $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
 var interval = setInterval(function() {
   if (i == time) {    
     clearInterval(interval);
     return;
   }
   $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
   i++;  
   }, 1000);
  };

Css

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.circle_animation {
  stroke-dasharray: 220; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 220;
  transition: all 1s linear;
}

Html

<svg class="countdownTimer " width="100" height="100" xmlns="http://www.w3.org/2000/svg">
     <g>
        <circle class="circle" cx="41" cy="41" r="37" stroke-width="1" fill="none" stroke="grey"/>
        <circle ng-init="startTimer();" id="circle" class="circle_animation" r="34.44" cy="41" cx="41" stroke-width="5" stroke="#0288d1" fill="none"/><circle class="circle" cx="41" cy="41" r="32" stroke-width="1" fill="none" stroke="grey"/><span ng-init="timer();RequestSend();"  id="countdowntimer" class="timeNumber">30</span>
     </g>
    </svg>

Answer 1

删除转换使用jquery动画：

    var startTimer = function() {
  $('.circle_animation').css({'stroke-dashoffset': 220 });
   $('.circle_animation').stop();
    var time = 30;
    var initialOffset = '0';
    var i = 1;
    $('.circle_animation').animate({'stroke-dashoffset': initialOffset },30000);

  };

演示：http://jsfiddle.net/qZrgS/92/

如何使用 SVG 或 JavaScript 或 Jquery 设计循环倒数计时器 30 秒？

how to design circular count down timer for 30 second using SVG or JavaScript or Jquery?

jquery

svg

jquery-plugins

web