单击按钮后显示倒计时

Question

我有一个 table 有很多行（最后大约有 50 - 100 行）并且每行都有不同的超时时间。我想要当我点击第一个按钮（link）时第一行开始倒计时，如果在第二行，第二个倒计时开始。

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

这里有两个例子：

<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/

谁能帮我用我提供的 link 创建 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>

Answer 2

如何在浏览器刷新关闭后继续计时？

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>

单击按钮后显示倒计时

Show countdown timer after button click

javascript

timer

countdown

countdowntimer