Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2014, 11:01
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Перезапуск одного таймера из нескольких
Всем здравствуйте.
Прошу помощи у компетентных.
На странице - несколько таймеров, отсчитывающих 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>


Может есть, кто реализовывал подобное?
Ответить с цитированием
  #2 (permalink)  
Старый 11.06.2014, 12:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,602

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>

Последний раз редактировалось рони, 11.06.2014 в 14:26.
Ответить с цитированием
  #3 (permalink)  
Старый 11.06.2014, 13:22
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Вроде как то, но не то, или я не понимаю.

Вот так таймеры выглядят у меня:
<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 из кнопок.

и нечего не работает...

И таймеры (вначале) должны запускаться сами, без нажатия на кнопку

Последний раз редактировалось Drugpunker, 11.06.2014 в 13:52.
Ответить с цитированием
  #4 (permalink)  
Старый 11.06.2014, 14:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,602

Сообщение от Drugpunker
И таймеры (вначале) должны запускаться сами, без нажатия на кнопку
добавил смотрите код выше - строка 59
Ответить с цитированием
  #5 (permalink)  
Старый 16.06.2014, 08:26
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Вроде как понял, но в моём то случае
<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, но чего то не получается

Уже как только ни пробовал решение переделать, аж стыдно, блин...
Ответить с цитированием
  #6 (permalink)  
Старый 16.06.2014, 08:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,602

Drugpunker,
почему у вас одинаковые id -- id уникально неповторимо http://learn.javascript.ru/
Ответить с цитированием
  #7 (permalink)  
Старый 16.06.2014, 09:04
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Это то оно таки да.

Цель поймать элемент, в частности <button>, в данной реализации, во время пересчёта <span> с классом time.

Вот я и говорю как, поймать то?
Ответить с цитированием
  #8 (permalink)  
Старый 16.06.2014, 09:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,602

Drugpunker,
Ответить с цитированием
  #9 (permalink)  
Старый 16.06.2014, 09:12
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Сообщение от рони
Drugpunker,
Ага, я примерно так вот уже несколько дней на таймеры смотрю...
Ответить с цитированием
  #10 (permalink)  
Старый 16.06.2014, 09:16
Интересующийся
Отправить личное сообщение для Drugpunker Посмотреть профиль Найти все сообщения от Drugpunker
 
Регистрация: 19.03.2014
Сообщений: 23

Может всё-таки при onClick по кнопке передавать уникальное имя каждой кнопки?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 11:03
Как изменить свойство css у всех элементов одного класса AlexJ Events/DOM/Window 7 19.03.2011 05:25
запретить повторный запуск таймера setInterval-clearInterval mrWong Общие вопросы Javascript 1 01.02.2010 11:25