基于JavaScript的倒计时时钟问题

时间:2013-08-03 13:15:15

标签: javascript jquery benchmarking

我正在努力制作一个从1小时开始的JavaScript倒计时时钟。 我在这个过程中只使用了一些jQuery。

$(document).ready(function(){

var h,m,s,output;
$("#StartW").click(function(){
function startWork()
{
    h = 1;
    m = 0;
    s = 0;
    output = h + ":" + m + ":" + s;
    setInterval(function() {count()}, 1000);
}

function count()
{
    if(s == 0)
    {
        if(m == 0)
        {
            if(h == 0);
            {
                output = "time's up";
            }
            h = 0;
            m = 59;
            s = 59;
        }
    m = m - 1;
    s = 59;
    }
s = s - 1;
output = h + ":" + m + ":" + s;
document.getElementById("WTM").innerHTML = output;
}
});
});

1- StartW是调用该函数的按钮的id。 2- WMT是时钟显示范围的id。

当我点击按钮时,我没有得到任何结果。什么都没发生。导航器中的JavaScript控制台根本不表示任何错误。

2 个答案:

答案 0 :(得分:1)

在您的点击事件功能中,您声明了两个函数,但从不调用它们,因此没有任何反应。试试这个:

$(document).ready(function(){

    var h,m,s,output;
    $("#StartW").click(function(){
        function startWork()
        {
            h = 1;
            m = 0;
            s = 0;
            output = h + ":" + m + ":" + s;
            setInterval(function() {count()}, 1000);
        }

        function count()
        {
            if(s == 0)
            {
                if(m == 0)
                {
                    if(h == 0)
                    {
                        output = "time's up";
                    }
                    h = 0;
                    m = 59;
                    s = 59;
                }
                m = m - 1;
                s = 59;
            }
            s = s - 1;
            output = h + ":" + m + ":" + s;
            document.getElementById("WTM").innerHTML = output;
        }
        startWork();
    });
});

修复缩进使其非常清晰,行;上还有一个if(h == 0);应删除

作为计算一小时计数的一个注释,您需要了解它可能不是很准确。你要求代码等待1000毫秒自己添加1秒,就像我们做的那样数秒说“mississipi”来帮助我们等待下一秒。虽然JavaScript在1秒内计算1000Milliseconds更精确,因为我们在一秒钟内说mississipi,但由于X和Y原因,它可能会关闭。知道已经过了多长时间的唯一真正准确的方法是观看时钟,并一次又一次地看它,直到它显示我们等了一个小时。所以,在JS中,保存它开始的时间,每隔一秒钟左右显示当前时间和开始时间之差的剩余时间并显示计时器。

答案 1 :(得分:1)

实际上,按下该按钮不会调用任何功能,只需启动它们即可。从单击事件中获取函数countstartWork,并执行类似

的操作

$('#StartW').on( 'click', startWork );

检查here