Показать таймер обратного отсчета после нажатия кнопки

Question

У меня есть таблица со многими строками (около 50 - 100 в конце), и каждая строка имеет разный тайм-аут. Я хочу, когда я нажимаю на первую кнопку (ссылку) обратный отсчет начала первой строки, если на второй строке - второй обратный отсчет.

После завершения отсчета будет отображаться любое слово вместо таймера.

Вот два exmeple линий:

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

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>