Question

我通常不喜欢发布我不熟悉的主题（在javascript中处理时间和日期一直是我的弱点），但我迫切需要一些帮助。

我正在使用this link to display a countdown timer on clients website。它应该是非常直接的，对吧？我这样实现了它：

<script type="text/javascript">
// set the date we're counting down to
var target_date = new Date('Sep, 18, 2015').getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById('countdown');

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdown.innerHTML = '<span class="days">' + days +  ' <b>Days</b></span> <span class="hours">' + hours + ' <b>Hours</b></span> <span class="minutes">'
    + minutes + ' <b>Minutes</b></span> <span class="seconds">' + seconds + ' <b>Seconds</b></span>';  

}, 1000);
</script>

风格

<style>
.container {
  margin: 0px auto;
  padding: 0px;
}

#main { 
  background: #3B3B3B;
  height: 430px;
}

.content {
  padding: 10px 44px;
}

.text {
  border-bottom: 1px solid #262626;
  margin-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}

.text h2 {
  color: #E5E5E5;
  font-size: 30px;
  font-style: normal;
  font-variant: normal;
  font-weight: lighter;
  letter-spacing: 2px;
}

.counter {
  background: #2C2C2C;
  -moz-box-shadow:    inset 0 0 5px #000000;
  -webkit-box-shadow: inset 0 0 5px #000000;
  box-shadow:         inset 0 0 5px #000000;
  min-height: 150px;
  text-align: center;
}

.counter h3 {
  color: #E5E5E5;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: lighter;
  letter-spacing: 1px;
  padding-top: 20px;
  margin-bottom: 30px;
}

#countdown {
  color: #FFFFFF;
}

#countdown span {
  color: #E5E5E5;
  font-size: 26px;
  font-weight: normal;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
}
</style>

HTML

<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="main">
<div class="content">
<div class="text">
<h2>This Website Is Under Construction</h2>
</div> <!-- /.Text Div -->
<div class="counter">
<h3>Estimated Time Remaining Before Launch:</h3>
<div id="countdown">
</div><!-- /#Countdown Div -->
</div> <!-- /.Counter Div -->
</div> <!-- /.Content Div -->
</div> <!-- /#Main Div -->
</div> <!-- /.Columns Div -->
</div> <!-- /.Row Div -->
</div> <!-- /.Container Div -->

输出

Firefox给了我以下错误：

Chrome告诉我以下内容：

代码完全如上所述实现，但我得到的错误如上图所示。但是，在this fiddle I have created中它正在运作。很奇怪，为什么会这样？

Answer 1

你在文件准备好后触发这个js代码吗？您正在使用ID 倒计时调用DOM对象，但可能尚未呈现？

看一下jQuery document ready function

总而言之，它应该是：

    $( document ).ready(function() 
    {
        var target_date = new Date('Sep, 18, 2015').getTime();

        // variables for time units
        var days, hours, minutes, seconds;

        // get tag element
        var countdown = document.getElementById('countdown');

        ... //etc...
    });

Answer 2

您需要确保在文档完全加载后运行代码，或者运行时elementById可能尚不存在。这就是您的情况：countdown变量将是null，因为当您的代码执行时，document中的元素不存在。

快速修复也存在于您的jsfiddle中（请查看右下方框架的来源）可能是将<script>标记放在元素下方，以便{代码执行时可能存在{1}}元素。

更好的解决方法，因为您标记了问题jQuery，因此您可以通过将代码包装在$(document).ready() or its shorthand中来执行此操作：

countdown

如果您不需要支持IE8及以下版本，则可以考虑使用a Vanilla JS alternative。

这是一个带有jQuery解决方案的可运行代码段：

＆＃13;

$(function() {
  // Your code...
});

＆＃13;

$(function() {
  var target_date = new Date('Sep, 18, 2015').getTime();
  var days, hours, minutes, seconds;
  var countdown = document.getElementById('countdown');

  setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdown.innerHTML = '<span class="days">' + days +  ' <b>Days</b></span> <span class="hours">' + hours + ' <b>Hours</b></span> <span class="minutes">'
    + minutes + ' <b>Minutes</b></span> <span class="seconds">' + seconds + ' <b>Seconds</b></span>';  

  }, 1000);
});

＆＃13;

另外一个也确保计数器立即开始而不是在第一个1秒间隔后开始：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Estimated Time Remaining Before Launch:</h3>
<div id="countdown"></div>

＆＃13;

$(function() {
  var target_date = new Date('Sep, 18, 2015').getTime();
  var days, hours, minutes, seconds;
  var countdown = document.getElementById('countdown');

  function updateCounter() {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdown.innerHTML = '<span class="days">' + days +  ' <b>Days</b></span> <span class="hours">' + hours + ' <b>Hours</b></span> <span class="minutes">'
    + minutes + ' <b>Minutes</b></span> <span class="seconds">' + seconds + ' <b>Seconds</b></span>';  

  }
  
  updateCounter();
  
  setInterval(updateCounter, 1000);
});

＆＃13;

输入元素倒计时为null的错误

2 个答案: