问题描述
限时送ChatGPT账号..我正在尝试制作一个 2 列表格单元格，右侧有倒数计时器，左侧有标题，我只能弄清楚如何为一个单元格设置一个倒数计时器，但我需要有多个所有单元格的倒数计时器.
I'm trying to make a 2 column table cell, with countdown timers on the right side, and titles on the left column, i can only figure out how to do one countdown timer for one cell but i need to have multiple countdown timers for all the cells.
所以我可以在右侧输入一个日期，javascript 让它倒计时直到到达那个日期.我唯一能做的就是一个倒数计时器，并且也有一个 ID，但我不知道如何再做几个.
So i can just type a Date in the right side and javascript makes it count down until that date is reached. the only thing i managed to do is a single countdown timer and have an ID it refers too, but i do not know how to make it on several more.
每一列的日期都不同.
这里是javascript代码
heres the javascript code
// Set the date we're counting down to
var countDownDate = new Date("Dec 10, 2020 21:41:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "DROPPED";
}
}, 1000);
</script>
and heres the html code
<html>
<head>
</head>
<body>
<table style="width:600px">
<tr>
<th>TEXT</th>
<th>COUNTDOWN</th>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td id="demo"></td>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td>DATE</td>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td> DATE </td>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td>DATE</td>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td>DATE</td>
</tr>
<tr>
<td><a href="www.google">TBA</a></td>
<td> DATE</td>
</tr>
</table>
</body>
</html>
Kind regards.
推荐答案
此示例信息取自 Array 并指向具有演示 ID 和序列号的项目.
This example information is taken from Array and directed to items with demo ID and serial number.
在数组中输入日期、链接和标题.并且计时器本身将被添加到表中.
Enter the date, link and title in the Array. And the timers themselves will be added to the table.
在JS中我添加了一个检查，如果剩余天数为0，则添加一个类 .endsoon 还添加了一个毕业生类.dropped在 css 中，我设置了值以对表格进行基本样式化，以便字段在倒计时期间不会移动
In the JS I added a check that adds a class if the remaining days are 0 .endsoon A class of graduates is also added .dropped
In css I set values to make basic stylization of the table so that the fields do not move during the countdown
在创建表时，函数 checkDate() 检查日期.如果日期已过，则不会将其添加到表格中.
While the table is being created, the function checkDate() checks the dates. If the date has passed, it is not added to the table.
时间结束后，铭文DROPPED"出现将保留 5 分钟，之后将删除表格的这一行.可以从代码中的这一行更改时间 var remAft = 5;
After the time expires, the inscription "DROPPED" will remain for 5 minutes after which this row of the table will be removed. The time can be changed from this line in the code var remAft = 5;
var arr = [
// Date...................Link..............Title
['Dec 10, 2021 23:26:25', 'www.google', 'TBA'],
['Dec 8, 2021 21:41:25', 'www.google', 'TBA'],
['Dec 10, 2021 21:41:25', 'www.google', 'TBA'],
['Dec 11, 2021 21:41:25', 'www.google', 'TBA'],
['Jan 15, 2022 21:41:25', 'www.google', 'TBA'],
['Dec 20, 2022 21:41:25', 'www.google', 'TBA']
];
// Remove after 5min
var remAft = 5;
// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i++) {
if (checkDate(arr[i][0])) {
// Adds the elements of the table with filled in information
wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'
// Invokes the function by passing as arguments Date and ID
new myTimers(arr[i][0], 'demo' + (i + 1));
}
}
function checkDate(tim) {
var countDownDate = new Date(tim).getTime();
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance > -60 * 1000 * remAft) { return true; } else { return false; }
}
function myTimers(tim, ele) {
// Set the date we're counting down to
var countDownDate = new Date(tim).getTime();
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById(ele).innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
if (distance > -60 * 1000 * remAft) {
document.getElementById(ele).innerHTML = "DROPPED";
document.getElementById(ele).classList.add('dropped');
} else {
clearInterval(x);
var chekEl = document.getElementById(ele);
if (chekEl) {
chekEl.parentElement.remove();
}
}
}
// If days is 0 add class 'endsoon'
if (days === 0) {
document.getElementById(ele).classList.add('endsoon');
}
}, 1000);
}#timer {
width: 500px;
text-align: left;
}
#timer tr th,
#timer tr td {
width: 50%;
}
#timer tr {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#timer .dropped {
color: red;
}
#timer .endsoon {
color: orangered;
}<table id="timer">
<tbody>
<tr>
<th>TITLE</th>
<th>COUNTDOWN</th>
</tr>
</tbody>
</table>这篇关于单元格表上的多个倒数计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论