0

好的，所以我的网站上有以下 javascript 用于倒数计时器：

<script type="text/javascript">
function timer(elementid, totaltime, format, color, style, trigger_a, trigger_b, done) {

  var hours = 0; var minutes = 0; var seconds = 0;

  if (totaltime > 0) {

    while (totaltime >= 3600) { hours++; totaltime -= 3600; }
    if (hours < 10) { hours = '0' + hours; }
    while (totaltime >= 60) { minutes++; totaltime -= 60; }
    if (minutes < 10) { minutes = '0' + minutes; }
    seconds = totaltime;
  }

  function display() {

    if (hours == 0 && minutes == 0 && seconds == 0) {

      if (trigger_a == "reload") { location.href="page.php"; }
      else if (trigger_a == "enable" && trigger_b != "") { document.getElementById(trigger_b).disabled = false; }
      else { /* do nothing */ }

      document.getElementById(elementid).innerHTML = done;      
    }

    else {

      var output = '';

      if (seconds > 0 && seconds <= 59) { seconds--; if (hours < 10) { hours = '0' + hours; } }
      else {
        if (minutes > 0 && minutes <= 59) { minutes--; if (minutes < 10) { minutes = '0' + minutes; } }
        else {
          if (hours > 0) { hours--; minutes = 59; }
        }
        seconds = 59;
      }

      if (hours > 0) {        
        if (format == 'long') { output += hours + " hours "; }
        else if (format == 'small') { output += hours + "h "; }
      }

      if (minutes > 0) {       
        if (format == 'long') { output += minutes + " minutes "; }
        else if (format == 'small') { output += minutes + 'm ';}
      }

      if (seconds < 10) { seconds = '0' + seconds; }
      if (format == 'long') { output += seconds + ' seconds'; }
      else if (format == 'small') { output += seconds + 's'; }

      if (color == '') {

        if (style == 'bold') { document.getElementById(elementid).innerHTML = '<b>' + output + '</b>'; }
        else { document.getElementById(elementid).innerHTML = output; }
      }

      else {

        if (style == 'bold') { document.getElementById(elementid).innerHTML = '<font color='+color+'><b>' + output + '</b></font>'; }
        else { document.getElementById(elementid).innerHTML = '<font color='+color+'>' + output + '</font>'; }
      }      
      setTimeout(display, 1000);
    }
  }
  display();  
}
</script>

我添加了一个像这样的跨度框：

<?php
$time_left = $from_database['time_left']; //timestamp;
?>
<span id="test"></span>
<script>
timer("test", "<?php echo $time_left - Time(); ?>", "long", "", "", "enable", "unlock_this", "Done");
</script>

<input type="submit" id="unlock_this" <?php if ($time_left - Time() > 0) { echo 'disabled'; } ?> />

问题是，当我刷新此页面时（在 $time_left 之后），没有显示“完成”消息，并且我收到一个 javascript 错误（document.getElementById = null），它指向

else if (trigger_a == "enable" && trigger_b != "") { document.getElementById(trigger_b).disabled = false; }

这可能只是一件小事，但我无法弄清楚我做错了什么，所以请帮忙。

4

2 回答 2

0

看起来问题只是您在带有id 的输入有机会加载timer之前执行了该函数。unlock_this我意识到您已经延迟setTimeout调用 ofdisplay但您是否尝试将脚本放在input元素下方？

还是timer在加载整个窗口时调用更好？执行第二个选项的最简单方法是：

window.onload = function () {
    timer("test", "<?php echo $time_left; ?>", "long", "", "", "enable", "unlock_this", "Done");
};

但是您已经在使用onload窗口的属性，您需要以更智能的方式加载它（使用 JQuery 之类的库，或者使用包装函数保护现有函数）。

于 2013-01-31T12:59:58.313 回答
0

我认为问题在于您的 html 看起来像

<span id="test"></span>
<script>
timer("test", "<?php echo $time_left - Time(); ?>", "long", "", "", "enable", "unlock_this", "Done");
</script>

<input type="submit" id="unlock_this" disabled />

在调用 display() 的 timer() 被调用时，ID 为“unlock_this”的输入尚未被解析并添加到浏览器 DOM。

您应该延迟对 timer() 的调用，直到浏览器完成对文档的解析，如下所示：

<script>
window.onload = function(){
    timer("test", "<?php echo $time_left - Time(); ?>", "long", "", "", "enable", "unlock_this", "Done");
}
</script>

尽管此方法不会覆盖任何先前添加的 window.onload 处理程序。

于 2013-01-31T13:02:50.057 回答