javascript - 如何制作循环进度倒数计时器？

Question

你能帮我把这段代码变成倒计时设置吗……代码从 0 到 10 计数。我想从 10-0 开始。我不太擅长 jquery。请帮忙..

 <canvas height="200" width="200" id="counter"/>    
 </body>
 <script type="application/javascript">
    var counter = document.getElementById('counter').getContext('2d');
    var no = 0;
    var pointToFill = 4.72; 
    var cw = counter.canvas.width;
    var ch = counter.canvas.height;
    var diff;

    function fillCounter(){
        diff = ((no/10) * Math.PI*2*10);            
        counter.clearRect(0,0,cw,ch); 
        counter.lineWidth = 15;
        counter.fillStyle = '#fff';    
        counter.strokeStyle = '#F5E0A9';    
        counter.textAlign = 'center';            
        counter.font = "25px monospace";      
        counter.fillText(no+'sec',100,110);
        counter.beginPath();
        counter.arc(100,100,90,pointToFill,diff/10+pointToFill);
        counter.stroke();

        if(no >= 10)
        {
            clearTimeout(fill);
        }
        no++;
    }

     var fill = setInterval(fillCounter,1000);
  </script>

标签： javascriptjquerytimer

Answer 1

这是演示：https ://codepen.io/creativedev/pen/ERwGej

var counter = document.getElementById('counter').getContext('2d');
var no = 10;
var pointToFill = 4.72;
var cw = counter.canvas.width;
var ch = counter.canvas.height;
var diff;

function fillCounter() {
    diff = ((no / 10) * Math.PI * 2 * 10);
    counter.clearRect(0, 0, cw, ch);
    counter.lineWidth = 15;
    counter.fillStyle = '#000';
    counter.strokeStyle = '#F5E0A9';
    counter.textAlign = 'center';
    counter.font = "25px monospace";
    console.log(no);
    counter.fillText(no + 'sec', 100, 110);
    counter.beginPath();
    console.log(diff)
    counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill);
    counter.stroke();

    if (no == 0) {
        clearTimeout(fill);
    }
    no--;
}

var fill = setInterval(fillCounter, 1000);