0

我正在尝试学习一些 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);
}
4

3 回答 3

0

对于您正在尝试做的事情，setInterval()功能会更好。只需删除函数的setTimeout()and之外，添加：

setInterval(cdtd, 1000);

希望这可以帮助。您可以在此处阅读更多信息setInterval()：JavaScript 计时事件。

于 2013-06-07T18:49:44.197 回答
0

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

该函数需要调用一次。

clearTimeout 将计时器对象作为参数而不是字符串我认为将 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>
于 2013-06-07T19:01:05.257 回答
0

In the interests of teaching and learning. There are a few things to keep in mind in JavaScript.

  1. The DOM is slow as hell.
  2. The DOM is pretty slow.
  3. Do as few DOM operations as possible.

Okay well not really, but keep in mind that doing calls like documentGetElementById has to talk to the DOM, which can be fairly expensive.

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);
于 2013-06-07T19:03:27.193 回答