Question

我有一个倒计时的小脚本

其中一个问题是从几秒钟到更好的可读性0:00

另一个问题是倒计时开始的时间

编辑：我想我混淆了一点php

window.onload = function() {
    canvas  = document.getElementById('timer'),
    seconds = document.getElementById('counter'),
    ctx     = canvas.getContext('2d'), 
    sec     = seconds.innerHTML | 0,
    countdown = sec;

ctx.lineWidth = 8;
ctx.strokeStyle = "#528f20";

var 
startAngle = 0, 
time       = 0,
mins       = 0,
secs       = 0,
intv       = setInterval(function(){

    // Making 180 look like 3:00 is not working 
    if(sec > 59)
{
    mins = Math.floor(sec/60);
    secs = Math.floor(sec - mins*60);


    if(mins < 10) mins = "0" + mins;
    if(secs < 10) secs = "0" + secs;
}

    var endAngle = (Math.PI * time * 2 / sec);
    ctx.arc(50, 50, 35, startAngle , endAngle, false);   
    startAngle = endAngle;
    ctx.stroke();

    seconds.innerHTML = countdown--;

    if (++time > sec) { clearInterval(intv); }

}, 1000);

Answer 1

倒计时的延迟是由于它被链接到window.onload事件引起的，countdown--; seconds.innerHTML = Math.floor(countdown/60); seconds.innerHTML += ":" + countdown%60;事件仅在页面的所有内容都已加载时触发（因此它启动所需的时间）。如果您希望它更快地启动，我建议您查看 DOM ready事件。（比如this）。

至于“更易读的0:00”，我用一个简单的解决方案制作了jsFiddle：

{{1}}

将当前时间除以60（并向下舍入到最接近的整数）作为分钟，并将此除法的倒数作为秒。

倒数到分钟和秒的时间

1 个答案: