Question

我想创建一个在线拍卖网站。我需要提及每个拍卖结束时间和时间。日期。

为此，我创建了一个countdown.js文件，如下所示：

// set the date we're counting down to
var target_date = new Date("Aug 15, 2014").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 = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);

我已经在我的html中导入了这个，如下所示：

<script type="text/javascript"src="js/countdown.js"></script>
 <p style="font-size:larger;color:Red;font-weight:bolder">END IN</p>
                    <h5><i id="countdown"></i></h5><br />

工作正常。现在我想在同一页面中添加一个或多个计时器。我使用这段代码

<h5><i id="countdown"></i></h5><br />

它显示ID错误。如何纠正这个？

Answer 1

只需将您的代码移动到一个接受2个参数elementId和目标日期

的函数中

  function setTimer(elem_id, date) {
 // set the date we're counting down to
var target_date = new Date(date).getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element

var countDownElem = document.getElementById(elem_id);
//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
  countDownElem.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);
}
setTimer("countdown1","Aug 15, 2014");
setTimer("countdown2","Aug 17, 2014");

以上代码的fiddle

Answer 2

上面的答案有效，但我注意到第二个计时器显示比第一个计时器长一个小时。

如何在同一个html页面中添加多个倒计时器查询？

2 个答案: