2

我正在尝试实现一个脚本，该脚本基本上从 30 秒倒计时到 0，并在 0 时重定向到主页。但是，我注意到我的脚本仅适用于 Firefox，但不适用于 Chrome 和 Safari。在这些浏览器上，计数器在 30 秒时仍然“卡住”——从不刷新 HTML，但重定向工作正常。不确定我是否做错了什么，或者 setInterval 是否不是这种事情的正确方法。

<script>
   var seconds = 31;
   var counter = setInterval("timer()", 1000);
   function timer() {
        seconds = seconds - 1;
        if (seconds < 0) {
            setTimeout("location.href='http://www.homepage.com';", 100);
            return;
        }
        updateTimer();
   }

   function updateTimer() {
         document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " +  "seconds";
   }
  </script>

提前致谢！

编辑：太奇怪了，我的代码（以及你所有的代码）都在 JSFiddle 上工作，但它只是在实际呈现页面时未能“重新绘制”HTMLinner。秒数变化很好（我将它们输出到控制台），只是没有呈现变化。

最终编辑：这个问题基本上是由无效的 CSS 引起的。我相信 - 计数器在照片上方运行，我将跨度设置为具有更高 z-index 和顶部和底部元素的相对定位。我不相信这对于不是块的东西是可以接受的。

4

3 回答 3

4

这是一个工作示例：

(function() { // wrapper for locals
  var timer = document.getElementById("timer"),
    seconds = 5,
    counter = setInterval(function() {
      if (--seconds < 1) {
        clearInterval(counter);
        timer.innerHTML = "Redirecting now...";
        setTimeout(function() {
          location.href = 'http://www.homepage.com';
        }, 500);
      } else {
        timer.innerHTML = timer.innerHTML.replace(/\d+/, seconds);
      }
    }, 1000);
})();
<div id="timer">Redirecting in 5 seconds</div>

​ ​</p>

于 2012-10-18T17:24:16.317 回答
0

将您的函数更改为对我有用的变量：

<script>
   var seconds = 31;
   var counter = setInterval(timer, 1000);
   var timer = function() {
        seconds = seconds - 1;
        if (seconds < 0) {
            setTimeout("location.href='http://www.homepage.com';", 100);
            return;
        }
        updateTimer();
   }

   function updateTimer() {
         document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " +  "seconds";
   }
  </script>
于 2013-10-12T11:53:52.960 回答
0

这是一个定义函数更少的更简洁的实现（带有demo）：

<span id='timer'></span>
<script>
var seconds = 31;
setInterval(function() {
  seconds = seconds - 1;
  if (seconds < 0) {
    setTimeout(function() {document.getElementById('timer').innerHTML = "redirecting..."}, 100);
    return;
  }
  updateTimer();
}, 1000);

function updateTimer() {
  document.getElementById('timer').innerHTML = "Redirecting in " + + seconds + " seconds";
}
<script>

当然，每个 JavaScript 程序员都应该有机会指出“eval 是邪恶的”，其中包括将字符串传递给 setInterval 和 setTimeout :)

于 2012-10-18T17:21:50.187 回答