Question

好的，所以我的网站上有以下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; }

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

Answer 1

看起来好像问题只是在timer id的输入有机会加载之前执行unlock_this函数。我意识到您在setTimeout调用display时遇到了延迟，但是您是否尝试将脚本放在input元素下面？

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

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

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

Answer 2

我认为问题在于你的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为＆＃34; unlock_this＆＃34;尚未解析并添加到浏览器DOM。

你应该延迟调用timer（）直到浏览器完成解析文档，如下所示：

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

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

Javascript函数无法正常工作

2 个答案: