相关疑难解决方法(0)

如何在 CSS3 或 JS 中实现径向擦除动画？这看起来很简单，但我无法弄清楚。

我创建了一个倒数计时器.我有一个圆形的边框.当计时器趋于零时,圆形边框应该以秒为单位递减颜色.

我创建了JSFIDDLE

HTML

<div class="outer">
    <button class="btn btn-default btn-timer">0.00</button>
</div>

JS代码

var displayminutes;
var displayseconds;
var initializeTimer = 1.5 // enter in minutes
var minutesToSeconds = initializeTimer*60;

$("#document").ready(function(){
    setTime = getTime();
    $(".btn-timer").html(setTime[0]+":"+setTime[1])
});


$(".btn-timer").click(function(){
    var startCountDownTimer = setInterval(function(){
          minutesToSeconds = minutesToSeconds-1;
        var timer = getTime();
         $(".btn-timer").html(timer[0]+":"+timer[1]);
        if(minutesToSeconds == 0){
            clearInterval(startCountDownTimer);
            console.log("completed");
        }
      },1000)
});


function getTime(){

    displayminutes = Math.floor(minutesToSeconds/60);
    displayseconds = minutesToSeconds - (displayminutes*60);
    if(displayseconds < 10)
    {   
        displayseconds ="0"+displayseconds;
    }
     if(displayminutes < 10)
    {   
        displayminutes = "0"+displayminutes;
    }

    return …