Question

我正在尝试学习一些工作面试评估项目的java脚本。问题是我有一个计时器，当计时器到达零时，它应该用包含文本和图像的另一个div替换包含它的div。我搜索但找不到这样的例子。这是计时器的代码，我想我应该在clearTimeout之后放一些东西，但我尝试的一切都不起作用：

function cdtd() {
var kickoff = new Date("June 07, 2013 20:13:00");
var now = new Date();
var timeDiff = kickoff.getTime() - now.getTime();
if (timeDiff <= 0) {
       clearTimeout ("timer");

       }




var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %=24;
minutes %=60;
seconds %= 60;
if (seconds < 10) {
 seconds = "0" + seconds;
}
if (minutes < 10) {
 minutes = "0" + minutes;
}
if (hours < 10) {
 hours = "0" + hours;
}
if (days < 10) {
 days = "0" + days;
}


document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secondsBox").innerHTML = seconds;

var timer = setTimeout('cdtd()',1000);
}

Answer 1

对于您要做的事情，setInterval()功能会更好。只需删除您的函数的setTimeout()和，添加：

setInterval(cdtd, 1000);

希望这会有所帮助。您可以在此处详细了解setInterval()：JavaScript Timing Events。

Answer 2

您可以在HTML部分下找到完整的解决方案。

该函数需要调用一次。

clearTimeout将一个计时器对象作为一个参数而不是一个String我认为将setTimer放在条件中会更好。

timeDiff <= 0时输出不是很大，但这不是问题的一部分。

快乐的编码！

<html>
<body>
    <span id="daysBox"></span>
    <span id="hoursBox"></span>
    <span id="minsBox"></span>
    <span id="secondsBox"></span>

<script>
var timer = null;
function cdtd() {
    var kickoff = new Date("June 08, 2013 20:13:00");
    var now = new Date();
    var timeDiff = kickoff.getTime() - now.getTime();


    if (timeDiff > 0) {
        setTimeout('cdtd()', 1000);
    }

    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %=24;
    minutes %=60;
    seconds %= 60;
    if (seconds < 10) {
     seconds = "0" + seconds;
    }
    if (minutes < 10) {
     minutes = "0" + minutes;
    }
    if (hours < 10) {
     hours = "0" + hours;
    }
    if (days < 10) {
     days = "0" + days;
    }


    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secondsBox").innerHTML = seconds;

    }
    cdtd();
</script>
</body>
</html>

Answer 3

为了教学和学习的利益。 JavaScript中有一些要记住的事项。

DOM很慢。
DOM很慢。
尽可能少地进行DOM操作。

好吧不是真的，但请记住，像documentGetElementById这样的调用必须与DOM对话，这可能相当昂贵。

HTML

<div id="timerContent"></div>

的JavaScript

// No point to recalculate these every timer evaluation.
var kickoff = new Date("June 07, 2013 20:13:00"),
    timerContainer = document.getElementById('timerContent'),
    timer; // Added for visibility in the global scope.


function cdtd() {
  var now = new Date(),
      timeDiff = kickoff.getTime() - now.getTime();

  if (timeDiff <= 0) {

     clearTimeout(timer);
     timerContainer.innerHTML = '<div>KICK OFF!!!!</div> <img src="xxxxx" />';

  } else {

    // This style of declaration is just preference.
    var seconds = Math.floor(timeDiff / 1000),
        minutes = Math.floor(seconds / 60),
        hours = Math.floor(minutes / 60),
        days = Math.floor(hours / 24);

    if (seconds < 10) seconds = "0" + seconds;
    if (minutes < 10) minutes = "0" + minutes;
    if (hours < 10) hours = "0" + hours;
    if (days < 10) days = "0" + days;

    // Using an array simplifies the process of creating the text
    // In some browsers this is more performant than using '' + ''
    // In other browsers it's not, in reality the difference marginal in
    // small iterations like this one.
    var textTemplateArray = [
          days, 'Days',
          minutes, 'Minutes',
          hours, 'Hours',
          seconds, 'Seconds'
        ];

    timerContainer.innerHTML = textTemplateArray.join(' ');
  }
}

timer = setInterval(cdtd, 1000);

倒数计时器替换div元素

3 个答案: