Javascript 单元格表上的多个倒计时计时器_Javascript_Html_Timer

Javascript 单元格表上的多个倒计时计时器

javascript html timer

Javascript 单元格表上的多个倒计时计时器,javascript,html,timer,Javascript,Html,Timer,我正在尝试制作一个2列的表格单元格，右边是倒计时，左边是标题，我只知道如何为一个单元格倒计时，但我需要为所有单元格设置多个倒计时所以我可以在右边键入一个日期，javascript会让它倒计时，直到到达该日期。我唯一能做的就是一个倒计时计时器，它也有一个ID，但我不知道如何在多个计时器上设置它每列上的日期将不同下面是javascript代码 // Set the date we're counting down to var countDownDate = new Date("D

我正在尝试制作一个2列的表格单元格，右边是倒计时，左边是标题，我只知道如何为一个单元格倒计时，但我需要为所有单元格设置多个倒计时

所以我可以在右边键入一个日期，javascript会让它倒计时，直到到达该日期。我唯一能做的就是一个倒计时计时器，它也有一个ID，但我不知道如何在多个计时器上设置它

每列上的日期将不同

下面是javascript代码

// 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.com">TBA</a></td>
            <td id="demo"></td> 
            
        </tr> 
        <tr> 
            <td><a href="www.google.com">TBA</a></td>
            <td>DATE</td> 
            
        </tr> 
        <tr> 
            <td><a href="www.google.com">TBA</a></td>
            <td> DATE </td> 
            
        </tr> 
        <tr> 
            <td><a href="www.google.com">TBA</a></td>
            <td>DATE</td> 
            
        </tr> 
        <tr> 
            <td><a href="www.google.com">TBA</a></td>
            <td>DATE</td> 
            
        </tr> 
        <tr> 
            <td><a href="www.google.com">TBA</a></td>
            <td> DATE</td> 
            
        </tr> 
        
    </table> 
</body> 

</html>

Kind regards.

//设置我们倒计时的日期
var countDownDate=新日期（“2020年12月10日21:41:25”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“demo”）.innerHTML=days+d+hours+h
+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“已删除”；
}
}, 1000);
这是html代码
正文
倒计时
日期
日期
日期
日期
日期
亲切的问候。

您可以为每个字段指定一个类，并使用

querySelectorAll

查找所有这些字段，然后应用事件侦听器侦听更改事件

除此之外，代码与您的代码几乎相同（除了使用

.value

而不是

.innerHTML

设置字段的值）

免责声明：不验证您键入的日期是否有效

document.queryselectoral（“.countdown”）.forEach（cd=>{
设置倒计时（cd）
})
功能设置倒计时（字段）{
field.addEventListener（“更改”，函数（）{
field.disabled=true
var countDownDate=新日期（field.value）.getTime（）；
console.log（倒计时日期）
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//显示结果
field.value=天+天+小时+小时+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
field.value=“已删除”；
}
}, 1000);
})
}


正文
倒计时

此示例信息取自阵列，并定向到具有演示ID和序列号的项目

在数组中输入日期、链接和标题。计时器本身将被添加到表中

在JS中，我添加了一个检查，如果剩余天数为0，则会添加一个班级。endsoon也会添加一个毕业生班级在css中，我设置值来对表格进行基本样式化，以便字段在倒计时期间不会移动

编辑：创建表时，函数

checkDate（）

检查日期。如果日期已过，则不会将其添加到表中

时间到期后，“已删除”字样将保留5分钟，之后将删除该表的这一行。可以在代码

var remAft=5中从此行更改时间

var-arr=[
//日期链接标题
['Dec10202023:26:25'，'www.google.com'，'TBA']，
['Dec820021:41:25'，'www.google.com'，'TBA']，
['Dec10202021:41:25'，'www.google.com'，'TBA']，
['Dec11202021:41:25'，'www.google.com'，'TBA']，
[2021年1月15日21:41:25'，www.google.com'，TBA']，
['Dec2021211:41:25'，'www.google.com'，'TBA']
];
//5分钟后取出
风险价值剩余=5；
//获取ID为“timer”的元素
var wrap=document.querySelector（“#timer tbody”）；
//用于循环数组“arr”
对于（变量i=0；i-60*1000*remAft）{return true；}否则{return false；}
}
功能myTimers（tim、ele）{
//确定我们倒计时的日期
var countDownDate=新日期（tim）.getTime（）；
//每1秒更新一次倒计时
var x=设定间隔