JavaScript倒计时

Question

为什么不倒计时？

<script language="JavaScript" TYPE="text/javascript">
var container = document.getElementById('dl');
var seconds = 10;
var timer;
function countdown() {
seconds--;
if(seconds > 0) {
    container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..';
} else {
    container.innerHTML = '<a href="download.php">Download</a>';
    clearInterval(timer);
}
}
timer = setInterval(countdown, 1000);
</script>

<div id="dl"></div>
<input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" />

Answer 1

尝试在<script>之后移动<div id="dl"></div>阻止 。

这样，当执行document.getElementById('dl');时，页面中的相应元素就已存在。

根据您发布的内容，执行document.getElementById('dl');时，相应的<div>尚未存在 - 因此无法找到。

Answer 2

因为您尝试在元素存在之前到达该元素，因为代码在元素加载之前运行。

移动在函数内定位元素的行：

<script type="text/javascript">

var seconds = 10;
var timer;

function countdown() {
  var container = document.getElementById('dl');
  seconds--;
  if(seconds > 0) {
    container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..';
  } else {
    container.innerHTML = '<a href="download.php">Download</a>';
    clearInterval(timer);
  }
}

timer = setInterval(countdown, 1000);

</script>

<div id="dl"></div>
<input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" />

Answer 3

setInterval需要执行字符串，而不是函数指针

timer = setInterval（“countdown（）”，1000）;