Перезапуск одного таймера из нескольких
Всем здравствуйте.
Прошу помощи у компетентных. На странице - несколько таймеров, отсчитывающих 20 секунд. Работают. Под каждым таймером кнопка, нажав по которой, он должен перезапускаться. Но, перезапускаются все. Видимо нужно как-то привязать к конкретному id. Как это реализовать я понять не могу... Скрипт таймера:
function countdownTime(elem)
{
span_id = document.getElementById(elem);
bet_time = new Date;
bet_time = bet_time.getTime() + 20000;
function calculate(elem)
{
now_time = new Date;
now_time = now_time.getTime();
seconds = Math.ceil((bet_time - now_time) / 1000 * 1);
if (seconds > 0)
{
residue = seconds < 10 ? "0" + seconds : seconds;
elem.innerHTML = "00:00:" + residue;
setTimeout(function()
{
calculate(elem);
}
, 1000);
}
else
{
elem.innerHTML = "Поехали";
}
}
calculate(span_id);
}
Скрипт функции перезапуска:
function clickTimerButton(elem) {
//$('#' + elem).html('');
//clearInterval(timer);
return countdownTime(elem);
}
Html:
<span id=''>
</span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button
onClick='clickTimerButton('span_id');'>
</button>
Может есть, кто реализовывал подобное? |
Drugpunker,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.time, input {
background: rgba(102, 255, 51, 1);
width: 80px;
height: 30px;
display: block;
text-align: center;
}
</style>
<script>
function countdownTime(elem) {
var bet_time = new Date;
bet_time = bet_time.getTime() + 20000;
window.clearTimeout(elem.timer)
function calculate(elem) {
var now_time = new Date;
now_time = now_time.getTime();
var seconds = Math.ceil((bet_time - now_time) / 1000 * 1);
if (seconds > 0) {
residue = seconds < 10 ? "0" + seconds : seconds;
elem.innerHTML = "00:00:" + residue;
elem.timer = setTimeout(function () {
calculate(elem);
}, 1000);
} else {
elem.innerHTML = "Поехали";
}
}
calculate(elem);
}
function clickTimerButton(elem) {
return countdownTime(elem);
}
window.onload = function () {
var span = document.querySelectorAll('.time');
for (var i = 0; i < span.length; i++) {
var el = span[i];
var button = document.createElement('input');
button.onclick = (function (span) {
return function () {
clickTimerButton(span)
}
})(el);
button.type = 'button';
button.value = 'Жмак!'
el.parentNode.insertBefore(button, el.nextSibling);
button.click()
}
}
</script>
</head>
<body>
<span class='time'></span>
<span class='time'></span>
<span class='time'></span>
<span class='time'></span>
</body>
</html>
|
Вроде как то, но не то, или я не понимаю.
Вот так таймеры выглядят у меня:
<span id='span_id'>
</span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button
onClick='clickTimerButton('span_id');'>
</button>
<span id='span_id'>
</span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button
onClick='clickTimerButton('span_id');'>
</button>
<span id='span_id'>
</span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button
onClick='clickTimerButton('span_id');'>
</button>
Получается мне нужно добавить класс time ко всем спанам. Убрать onClick из кнопок. и нечего не работает...:cray: И таймеры (вначале) должны запускаться сами, без нажатия на кнопку |
Цитата:
|
Вроде как понял, но в моём то случае
<span id='span_id' class='time'>
</span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button>Жмак!</button>
получается, вот эта строчка не нужна? Код:
el.parentNode.insertBefore(button, el.nextSibling);Так как вставлять средствами JS <button></button>не нужно, пытаюсь использовать приведённый, рони код в моей реализации. Толку ноль... В итоге всё имеет такой вид: HTML:
<span id='span_id' class='time'></span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button id='button'>Жмак!</button>
<span id='span_id' class='time'></span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button id='button'>Жмак!</button>
<span id='span_id' class='time'></span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button id='button'>Жмак!</button>
<span id='span_id' class='time'></span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button id='button'>Жмак!</button>
<span id='span_id' class='time'></span>
<script language='javascript'>
countdownTime('span_id')
</script>
<button id='button'>Жмак!</button>
JS:
function countdownTime(elem)
{
var bet_time = new Date;
bet_time = bet_time.getTime() + 20000;
window.clearTimeout(elem.timer);
function calculate(elem)
{
var now_time = new Date;
now_time = now_time.getTime();
var seconds = Math.ceil((bet_time - now_time) / 1000 * 1);
if (seconds > 0)
{
residue = seconds < 10 ? "0" + seconds : seconds;
elem.innerHTML = "00:00:" + residue;
elem.timer = setTimeout(function()
{
calculate(elem);
}
, 1000);
}
else
{
elem.innerHTML = "Поехали!";
}
}
calculate(elem);
}
/*Timer Button*/
function clickTimerButton(elem) {
return countdownTime(elem);
}
window.onload = function() {
var span = document.querySelectorAll('.time');
for (var i = 0; i < span.length; i++)
{
var el = span[i];
var button = document.getElementById('button');
button.onclick = (function(span)
{
return function()
{
clickTimerButton(span);
};
})(el);
el.parentNode.insertBefore(button, el.nextSibling);
button.click();
}
};
Видимо мне нужно ловить кнопку, например по id, но чего то не получается:-/ Уже как только ни пробовал решение переделать, аж стыдно, блин... |
Drugpunker,
почему у вас одинаковые id -- id уникально неповторимо http://learn.javascript.ru/ |
Это то оно таки да.
Цель поймать элемент, в частности <button>, в данной реализации, во время пересчёта <span> с классом time. Вот я и говорю как, поймать то? |
Drugpunker,
:blink: |
Цитата:
|
Может всё-таки при onClick по кнопке передавать уникальное имя каждой кнопки?
|
| Часовой пояс GMT +3, время: 19:25. |