时间戳

首页 > 解决方案 > 倒计时到html的多个实例

javascript - 倒计时到html的多个实例

问题描述

我正在用时刻 js 倒计时。这是代码： https ://telegra.ph/Codepen---Code-06-22（CodePen）

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

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

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

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

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

谢谢-

标签： javascripthtmljquerymomentjscountdown

解决方案

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

  • 外部函数将标识一个将写入倒计时的 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>

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

编辑：

我更改了第一次倒计时的目标日期时间，这样它总是会给你一个 20 秒的窗口。之后出现最后一条消息，他倒计时停止。

推荐阅读