Question

我有一段代码，应该倒数一些（在本例中为1111）并将其写入span id =“timeframe”。但它不起作用，我不知道为什么。你能告诉我我的错误在哪里吗？

<script language="JavaScript">
  <!--
  var txt_minute = "Min";
  var txt_second = "s";
  var time_left = 1111;
    var temp=timeleft;
              houres = Math.floor(temp / 3600); 
              temp %= 3600;
              minutes = Math.floor(temp / 60)";
              temp %= 60;
              seconds= temp;

function display()
{
    time_left -= 1;
    if (seconds <= 0) {
        seconds = 59;
        minutes -= 1;
    } else {
        seconds -= 1;
    }
if (minutes <= 0){
minutes=59;
houres-=1;
}

    if (time_left <= 0) {
        seconds = 0;
    }



    if (time_left > 0) {
        document.getElementById("timeframe").innerHTML = houres +" hours" + minutes + " " + txt_minute + " " + seconds + " " + txt_second;
    } else {
        window.location.reload();
    }
    setTimeout("display()",1000);
}

display();

//-->
</script>

Answer 1

有一些较小的错误：

minutes = Math.floor(temp / 60)";
有一个不应该有的尾随引号。
var temp=timeleft;
那应该是time_left。
此外，您应该将setTimeout与引用一起使用到函数中，而不是要求它将文本解析为代码：setTimeout(display,1000);

编辑：我写了一个小巧，清晰的倒计时脚本。

function startCountdown ( timeLeft )
{
    var interval = setInterval( countdown, 1000 );
    update();

    function countdown ()
    {
        if ( --timeLeft > 0 )
            update();
        else
        {
            clearInterval( interval );
            update();
            completed();
        }
    }

    function update ()
    {
        hours   = Math.floor( timeLeft / 3600 );
        minutes = Math.floor( ( timeLeft % 3600 ) / 60 );
        seconds = timeLeft % 60;

        alert( '' + hours + ':' + minutes + ':' + seconds );
    }

    function completed ()
    {
        alert( 'completed' );
    }
}
startCountdown( 1234 );

只需根据您的需要更改update和completed功能，然后使用所需的值开始倒计时。

顺便说一下。如果你想更改代码中某个元素的innerHTML，你应该在某处保存引用，而不是每次调用都通过DOM获取它。

Answer 2

      minutes = Math.floor(temp / 60)";

Answer 3

上面提到的所有拼写错误和一个逻辑缺陷......

如果代码位于html的head部分，则第一次调用display()时尚未创建timeframe元素..

在dom加载后，

而不是display();使用window.onload=display;第一次运行它。

这是您的代码的固定工作版本.. http://jsbin.com/orege/edit

Answer 4

有一件事突然发现，我在顶部的计算（从var temp...开始）应该在里面display函数（可能需要一个新名称））。它在哪里，它只做了一次。（我也不相信实际的计算是正确的。实际上，整体代码并不是很理想，你可能不希望从你得到的任何地方获得更多的代码。但是我不会为此重写它。答案。）

另见n00b32的答案，顶部附近似乎有语法错误。

另外（OT）：您可以将setTimeout更改为：setTimeout(display, 1000)。不需要引号和parens。

Answer 5

作为一项额外的改进（但首先通过阅读其他人的评论来获得基本版本），我想替换这一行

   setTimeout(display, 1000);

用这个：

   var next = 1010 - (new Date()).getTime() % 1000;
   setTimeout(display, next);

第一个版本将永远不会每秒运行一次（由于其他进程正在运行以及setTimeout中的其他不准确性）。当display()的一次调用在第二个n结束时发生，而下一个调用仅发生在n+2的开头时，这可以使您的显示一次跳2秒。第二个版本查看当前时间（低至毫秒），并尝试在每秒开始之后安排下一次display()调用，这样可以使显示更加平滑。

javascript倒计时

5 个答案: