html 倒计时的多个实例

Question

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

我用这段代码集成到一个程序中table。这是 table： https://telegra.ph/Codepen---Code-06-22（代码笔）

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

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

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

我是新手，所以非常感谢您的帮助。

谢谢-

Answer 1

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

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

下面的代码片段只是演示了这种可重用功能所需的机制。我的外部函数还将提供一个“停止”按钮来停止倒计时。在每个外部函数中，您都可以访问 setInterval()-handle 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 秒 window。之后出现最后一条消息，倒计时停止。

html 倒计时的多个实例

Multiple instances of countdown into html

html

javascript

jquery

countdown

momentjs