Javascript 在 table 中实施多个倒数计时器

Question

我曾尝试在 table 中创建多个倒数计时器，它们将依靠变量来设置剩余时间。目前没有结果输出到页面，我不确定为什么。

理想情况下，这应该显示 4 个倒计时器

var table;
table = ("<table>");
for (i = 0; i < 4; i++) {
    table += ("<tr>");
    table += ("<td> Time Left : </td>");
    table += ("<td><div id=\"dday" + i + "\"></div></td>");
    table += ("<td><div id=\"dhour" + i + "\"></div></td>");
    table += ("<td><div id=\"dmin" + i + "\"></div></td>");
    table += ("<td><div id=\"dsec" + i + "\"></div></td>");
    table += ("</tr>");
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
var yr = 2016,
    m = 2,
    d = 3,
    hr = 4,
    min = 5;
for (i = 0; i < 4; i++) {
    countdown(yr, m, d, hr, min, i);
}


var year = 2010; 
var month = 12; 
var day = 21; 
var hour = 18; 
var minute = 38; 
var tz = -5;
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

function countdown(yr, m, d, hr, min) {
    theyear = yr;
    themonth = m;
    theday = d;
    thehour = hr;
    theminute = min;
    var today = new Date();
    var todayy = today.getYear();
    if (todayy < 1000) {
        todayy += 1900;
    }
    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
    var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
    var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
    var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
    var dd = futurestring - todaystring;
    var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
    var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
    document.getElementById('dday').innerHTML = dday;
    document.getElementById('dhour').innerHTML = dhour;
    document.getElementById('dmin').innerHTML = dmin;
    document.getElementById('dsec').innerHTML = dsec;
    setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
}

<div id="listinglist"></div>

Answer 1

您的脚本中几乎没有问题，例如您在创建 montharray 之前调用了倒计时函数，您没有使用 getElementById 中的 i 部分等

var table;
table = ("<table>");
for (i = 0; i < 4; i++) {
  table += ("<tr>");
  table += ("<td> Time Left : </td>");
  table += ("<td><div id=\"dday" + i + "\"></div></td>");
  table += ("<td><div id=\"dhour" + i + "\"></div></td>");
  table += ("<td><div id=\"dmin" + i + "\"></div></td>");
  table += ("<td><div id=\"dsec" + i + "\"></div></td>");
  table += ("</tr>");
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
var yr = 2016,
  m = 2,
  d = 3,
  hr = 4,
  min = 5;

var year = 2010;
var month = 12;
var day = 21;
var hour = 18;
var minute = 38;
var tz = -5;
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

//should be called after setting the montharray
for (i = 0; i < 4; i++) {
  countdown(yr, m, d, hr, min, i);
}

function countdown(yr, m, d, hr, min, i) {
  theyear = yr;
  themonth = m;
  theday = d;
  thehour = hr;
  theminute = min;
  var today = new Date();
  var todayy = today.getYear();
  if (todayy < 1000) {
    todayy += 1900;
  }
  var todaym = today.getMonth();
  var todayd = today.getDate();
  var todayh = today.getHours();
  var todaymin = today.getMinutes();
  var todaysec = today.getSeconds();
  var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
  var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
  var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
  var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
  var dd = futurestring - todaystring;
  var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
  var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
  var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
  var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

  //need to target the elements using i in the id
  document.getElementById('dday' + i).innerHTML = dday;
  document.getElementById('dhour' + i).innerHTML = dhour;
  document.getElementById('dmin' + i).innerHTML = dmin;
  document.getElementById('dsec' + i).innerHTML = dsec;

  //need to pass the parameter as passed to this function
  setTimeout(countdown.bind(this, yr, m, d, hr, min, i), 1000);
}

<div id="listinglist"></div>

Javascript 在 table 中实施多个倒数计时器

Javascript implementing multiple countdown timers in a table

html

javascript

timer