javascript - 单击按钮后显示倒计时器

Question

我有一个包含很多行的表(最后大约有 50 - 100 行)，每行都有不同的超时。我希望当我单击第一个按钮(链接)时，第一行的倒计时开始，如果在第二行，则第二个倒计时开始。

倒计时结束后，将显示任何单词而不是计时器。

以下是两行示例:

<tr>
      <td><form action="http://www.google.fr"><input type="submit" formtarget="_blank" value="Google 3 seconds"></form>
      </td>
      <td>00:00:03</td>
</tr>
<tr>
      <td><form action="http://www.google.fr"><input type="submit" formtarget="_blank" value="Google 2h30mins"></form>
      </td>
      <td>02:30:00</td>
</tr>

对于js，我在这里找到了这个:http://jsfiddle.net/6nDYd/10/

任何人都可以帮助我使用我提供的链接创建 js 脚本吗？

Answer 1

试试这个:

引用SO

function toTimeString(seconds) {
  return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}

function startTimer() {
  var nextElem = $(this).parents('td').next();
  var duration = nextElem.text();
  var a = duration.split(':');
  var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
  setInterval(function() {
    seconds--;
    if (seconds >= 0) {
      nextElem.html(toTimeString(seconds));
    }
    if (seconds === 0) {
      alert('sorry, out of time');
      clearInterval(seconds);
    }
  }, 1000);
}
$('.btn').on('click', startTimer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <form action="http://www.google.fr">
        <input class="btn" type="button" formtarget="_blank" value="Google 3 seconds">
      </form>
    </td>
    <td>00:00:03</td>
  </tr>
  <tr>
    <td>
      <form action="http://www.google.fr">
        <input class="btn" type="button" formtarget="_blank" value="Google 2h30mins">
      </form>
    </td>
    <td>02:30:00</td>
  </tr>
</table>