Show countdown timer after button click

Question

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 ?

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

Answer 2

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>