倒计时到html的多个实例

Question

我正在使用 moment js 进行倒计时。 这是代码： https://telegra.ph/Codepen---Code-06-22 (CodePen)

我使用此代码集成到编程表中。 这是表格： https://telegra.ph/Codepen---Code-06-22 (CodePen)

现在。 我真正想要实现的是：

首先。我的表中的每一行都有一个单独的代码。 （也许一场比赛安排在 10:00，但另一场比赛可能安排在 10:15）。

第二。更改“if”条件，以便我的 div 显示的文本在超过 2 小时后发生变化（这大约是游戏持续的时间）。

我是新手，所以我很感激任何帮助。

谢谢-

Answer 1

您可以通过两步功能实现您想要的：

• 外部函数将标识一个 DOM 元素，倒计时将写入其中。此函数的参数必须是有效的 CSS 选择器。
• 内部的实际上会开始倒计时到给定的日期。此函数的参数将传递给内部调用的 new Date() 构造函数。

下面的 sn-p 只是演示了这种可重用功能所需的机制。我的外部函数还将提供一个“停止”按钮来使倒计时停止。在每个外部函数中，您都可以访问setInterval()-句柄t。您可以利用它为它编写任何其他停止机制（涉及clearInterval(t)）。

在内部函数中编写时间字符串时我很懒惰：只要目标事件在当前日期时间的未来 31 天内，它就会正常工作。如果你想将它用于更一般的情况，你将不得不付出更多的努力......

function countdown(DOMsel){
  let trgEL=document.querySelector(DOMsel);   // target DOM element
  if (trgEL) return function(){
    let trgDT=new Date(...arguments),         // target Date object
        btn=trgEL.nextElementSibling;         // STOP button
    let t=setInterval(function(){
         let now=new Date()
         if (trgDT-now<0) { 
           trgEL.innerHTML="<b>Game over, please insert coin!</b>";
           clearInterval(t); // stop the current countdown
         } else {
           let str=new Date(trgDT - now).toJSON(); // timer string
           trgEL.textContent=+str.substr(8,2)-1+':'+str.substr(11,8)
         }
         }, 1000);
    btn.innerHTML='<button> stop </button>';  // build stop button ...
    btn.onclick=function(){clearInterval(t);} // assign stop function to it
  } 
  else return function(){console.log('target DOM element not found.');};
}
var now=new Date();
countdown('td:nth-child(3)')(now.setSeconds(now.getSeconds()+20));
countdown('tr:nth-child(5) td:nth-child(3)')(2020,5,26,20,5,27);

<table>
<tr><td>1</td><td>some</td><td>target1</td><td>next cell</td></tr>
<tr><td>2</td><td>table</td><td>with</td><td>various</td></tr>
<tr><td>3</td><td>cells</td><td>in</td><td>it.</td></tr>
<tr><td>4</td><td>d</td><td></td><td></td></tr>
<tr><td>5</td><td>e</td><td>target2</td><td></td></tr>
<tr><td>6</td><td>f</td><td></td><td></td></tr>
<tr><td>7</td><td>g</td><td></td><td></td></tr>
<tr><td>8</td><td>h</td><td></td><td></td></tr>
</table>

我以(y,mon,d,min,sec) 格式使用new Date() 构造函数，其中mon 是从0 开始的月份索引，因此5 表示第6 个月：六月。有趣的是，d 数字就像正常的日历日期一样工作。但他们可能会过头：如果我输入了 31，那将变成“7 月 1 日”。其他格式可用，请参阅here。您的输入始终根据您当地的时区进行解释，但我们从.toJSON() 获得的字符串始终是“格林威治时间”。起初这看起来很奇怪，但当您与全球观众打交道时会很有帮助，因为他们都会自动参考同一个时钟！

编辑：

我更改了第一次倒计时的目标日期时间，以便它始终为您提供 20 秒的窗口。之后出现最后一条消息，倒计时停止。