Javascript在一个表中实现多个倒计时计时器
Javascript implementing multiple countdown timers in a 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>
在您的脚本中有几个问题,就像您在创建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倒计时计时器值中节省时间
- 设置倒计时计时器,IE出现问题
- MobileFirst:在客户端运行计时器作业-最佳选项
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 倒计时计时器应该持续两个php页面
- 在Jquery倒计时计时器上设置每个数字的动画
- 我如何才能确保计时器设置为每天4点半,所以我不会;不用在Javascript中提及某个日期
- 如何禁用窗口.当计时器超时时,打开卸载警报
- 在Nodejs中为许多用户处理计时器
- 如果弹出窗口关闭,Javascript停止/重置计时器
- 如何在隐藏时暂停jquery计时器
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 计时器循环从不运行
- Progressbar计时器,仅在页面刷新时重新加载
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 在Javascript和php中实现计时器的最佳方法
- 如何在 Phaser JS 中实现一个好的计时器
- 在延迟/承诺实现中使用计时器是一种罪恶
- 实现“;高于毫秒”;网络上的精确计时器(最好使用javascript)
- Javascript在一个表中实现多个倒计时计时器