0

I have a table with many lines (about 50 - 100 at the end) and each lines have a different timeout. I want when i click on the first button (link) the countdown of the first line start, if on the second line, the second countdown start.

After, when the countdown is finish, any word will display instead of the timer.

Here are two exmeple of lines:

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

For js i found this here: http://jsfiddle.net/6nDYd/10/

Anyone can help me to create the js script with the link i provide ?

flavien317
  • 48
  • 1
  • 9
  • There is no actual question here. Start with what **you** have written, then ask about things you can't get working (i.e. a [*minimal, complete and verifiable example*](http://stackoverflow.com/help/mcve)). – RobG Sep 07 '15 at 13:13
  • here is a fiddle that i made some time ago. it might help you http://jsfiddle.net/RachGal/r5h0Lec9/ – Rachel Gallen Sep 07 '15 at 13:25

2 Answers2

1

Try this:

Ref from 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>
Community
  • 1
  • 1
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • this fiddle is in his question – Rachel Gallen Sep 07 '15 at 13:26
  • @RachelGallen, There is no fiddle in my answer..He is asking for multiple timers which is implemented in my post.Isn't it ? – Rayon Sep 07 '15 at 13:31
  • no he's asking for text to be displayed and your code is exactly what is in the link provided – Rachel Gallen Sep 07 '15 at 13:33
  • @RachelGallen, It is not exactly same. In the post, the duration for which interval should run is static whereas in my post, its been queried from adjacent `td` element. I have also executed alert when timer completes the interval and hence he can do whatever he wants instead of `alert()` – Rayon Sep 07 '15 at 13:37
  • @RayonDabre Thanks it's work on stackoverflow, but not on mine html lol. And instade of 00:00:03 can i writ now, and when click the timer start and when 0, now is re-write ? thank you very much by the way – flavien317 Sep 07 '15 at 13:43
  • @flavien317, You can have anything at the place of 00:00:03 but it has to be in `hh:mm:ss` format. You can do any action once the interval ends. I hope it helps ! – Rayon Sep 07 '15 at 13:46
  • @RayonDabre ok, but for exemple this: http://jsfiddle.net/28j2q5yd/ I click on button and the countdown appear, when its finish, now appear, how to do this ? Maybe with php ? – flavien317 Sep 07 '15 at 13:53
  • @RayonDabre how can i contact you ? add me on skype – flavien317 Sep 07 '15 at 17:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89013/discussion-between-rayon-dabre-and-flavien317). – Rayon Sep 07 '15 at 17:17
1

How to continue timer after browser is refreshed and closed?

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>
curot
  • 13
  • 5