2

我有一个倒计时的小脚本

http://jsfiddle.net/yv4H4/

问题之一是从秒到更好的可读性 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);
4

1 回答 1

2

倒计时的延迟是由于它被链接到window.onload事件引起的，该事件仅在页面的所有内容都已加载时触发（因此需要时间来启动它）。如果您希望它更快地触发，我建议您查看DOM 就绪事件。（例如这样）。

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

countdown--;
seconds.innerHTML = Math.floor(countdown/60);
seconds.innerHTML += ":" + countdown%60;

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

于 2012-10-29T00:28:03.317 回答