Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Konstantin102
1 / 1 / 0
Регистрация: 28.12.2009
Сообщений: 96
#1

Таймер на сайте - JavaScript

08.06.2015, 15:48. Просмотров 823. Ответов 6
Метки нет (Все метки)

Здравствуйте, подскажите пожалуйста как на сайте сделать что бы после нажатия кнопки запускался таймер в заместо кнопки, а по окончании отсчета кнопка опять стала активной.
Сам таймер есть.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.06.2015, 15:48
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Таймер на сайте (JavaScript):

Таймер выключения плеера на сайте - JavaScript
Не подскажите как доработать скрипт чтобы плеер проигрывал несколько минут и останавливался и вылазило сообщение? или просто останавливался...

ClearInterval и setInterval. Остановить таймер на сайте - JavaScript
На сайте стоит таймер, его нужно остановить. <span class="countdown_row countdown_amount">03:11</span> Мне подсказали сделать...

Таймер - JavaScript
Ребята вот нашел такой код. Помогите пожалуйста мне нужен чтоб при обновлении страницы таймер не начал заново. Что надо добавить? ...

таймер - JavaScript
предстала такая задача есть таймер который берет заданное время и делает обратный отсчет приведу пример кода <? $ST1 = $ST;?> <SCRIPT...

JS таймер - JavaScript
Собственно код. Вычисляет время до определенной даты. Проблема: В опере отображается в секундах... <!DOCTYPE html> <html> ...

Таймер на JS - JavaScript
Решил учиться веб-программированию, а для учебы поставил себе цель - сделать что-то типа браузерной рпг-шки. Но чтобы хорошо учиться - надо...

6
Kurles
158 / 123 / 29
Регистрация: 30.05.2015
Сообщений: 379
08.06.2015, 16:36 #2
HTML-код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<button id="button1" type="button" onclick="onclickHandler();">Push me</button>
 
<script>
 
 
    function onTimeout() {
        var button = document.getElementById('button1');
        button.classList.remove('red');
        button.removeAttribute('disabled');
    }
 
    function onclickHandler() {
        setTimeout(onTimeout, 2000);
        var button = document.getElementById('button1');
        button.setAttribute('disabled', 'true');
        button.classList.add('red');
    }
</script>
</body>
CSS-стили:
CSS
1
2
3
4
5
6
7
 button {
            background-color: aquamarine;
        }
 
        button.red {
            background-color: red;
        }
Песочница: http://jsfiddle.net/dmbgn33s/

второй вариант:

HTML-код:

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div id="timer-container">
    <button id="button1" type="button" onclick="onclickHandler();">Push me</button>
</div>
<script>
    function onTimeout(html) {
        var container = document.getElementById('timer-container');
        container.innerHTML = html;
    }
 
    function onclickHandler() {
        var container = document.getElementById('timer-container');
        var html = container.innerHTML;
        container.innerHTML = 'code to show timer';
        setTimeout(function() {onTimeout(html);}, 2000);
    }
</script>
</body>
http://jsfiddle.net/dmbgn33s/1/
0
Konstantin102
1 / 1 / 0
Регистрация: 28.12.2009
Сообщений: 96
08.06.2015, 18:02  [ТС] #3
Спасибо вы мне очень помогли, но у меня еще один вопрос. У меня на сайте много кнопок, я пишу
CSS:
CSS
1
2
3
4
5
6
7
 button {
 display:inline-block;height:28px;line-height:28px;background-image:url(/.s/t/1161/btn.png);background-position:0 center;padding:0 20px;margin:5px 0 0;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
 }
 
 button.dis {
display:inline-block;height:28px;line-height:28px;background-image:url([url]http://bitfaucet.moy.su/btndiseibl.png);background-position:0[/url] center;padding:0 20px;margin:5px 0 0;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
 }
HTML:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<button id="button1" type="button" onclick="onclickHandler();">Собрать</button>
<script>
 function onTimeout() {
 var button = document.getElementById('button1');
 button.classList.remove('dis');
 button.removeAttribute('disabled');
 }
 
 function onclickHandler() {
 setTimeout(onTimeout, 20000);
 var button = document.getElementById('button1');
 button.setAttribute('disabled', 'true');
 button.classList.add('dis');
 }
</script>
 
<button id="button2" type="button" onclick="onclickHandler();">Собрать</button>
 <script>
 function onTimeout() {
 var button = document.getElementById('button2');
 button.classList.remove('dis');
 button.removeAttribute('disabled');
 }
 
 function onclickHandler() {
 setTimeout(onTimeout, 20000);
 var button = document.getElementById('button2');
 button.setAttribute('disabled', 'true');
 button.classList.add('dis');
 }
</script>
Но при нажатии на первую кнопку или на вторую кнопку все равно не активная только вторая, в чем моя ошибка?
0
Kurles
158 / 123 / 29
Регистрация: 30.05.2015
Сообщений: 379
08.06.2015, 18:47 #4
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button id="button1" type="button" onclick="onclickHandler(this);">Собрать</button>
<button id="button2" type="button" onclick="onclickHandler(this);">Собрать</button>
 
<script>
    function onTimeout(button) {
        button.classList.remove('dis');
        button.removeAttribute('disabled');
    }
 
    function onclickHandler(button) {
        setTimeout(function() {onTimeout(button);}, 1000);
        button.setAttribute('disabled', 'true');
        button.classList.add('dis');
    }
</script>
http://jsfiddle.net/dmbgn33s/2/
1
Konstantin102
1 / 1 / 0
Регистрация: 28.12.2009
Сообщений: 96
08.06.2015, 18:55  [ТС] #5
Еще раз спасибо, но я так понял что обе кнопки обращаются к одной функции, а мне надо что бы таймер неактивности у каждой кнопки был отдельный.
0
Kurles
158 / 123 / 29
Регистрация: 30.05.2015
Сообщений: 379
08.06.2015, 19:17 #6
Там так и получается. Забавная штука javascript, одно и то же действие совершенно разными способами можно добиться

HTML-код:

HTML5
1
2
3
4
5
<button id="button1" type="button">Собрать 1</button>
<button id="button2" type="button">Собрать 2</button>
<button id="button3" type="button">Собрать 3</button>
<button id="button4" type="button">Собрать 4</button>
<button id="button5" type="button">Собрать 5</button>
JS-код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function () {
    var buttonsId = ['button1', 'button2', 'button3', 'button4', 'button5'];
    buttonsId.forEach(function (id) {
        document.getElementById(id).onclick = function () {
            onclickHandler(id)
        }
    });
})();
 
function onTimeout(button) {
    button.classList.remove('dis');
    button.removeAttribute('disabled');
}
 
function onclickHandler(buttonId) {
    var button = document.getElementById(buttonId);
    setTimeout(function () {
        onTimeout(button);
    }, 2000);
    button.setAttribute('disabled', 'true');
    button.classList.add('dis');
}
третий вариант
1
wm_zar
0 / 0 / 0
Регистрация: 21.07.2016
Сообщений: 1
21.07.2016, 12:58 #7
Возможли ли сделать, чтобы для каждой кнопки было разное время таймера?
0
21.07.2016, 12:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.07.2016, 12:58
Привет! Вот еще темы с ответами:

Таймер - JavaScript
У меня есть код таймера отсчета от определенной даты...исправьте его пожалуйста или предложите свой....таймер функционирует, но есть одно...

Таймер - JavaScript
Можете помочь найти ошибку? Реально не знаю уже где ошибка. Ошибка возникла, когда я с #Countbox на .Countbox селектор поменял... ...

Таймер - JavaScript
Здраствуйте! Знаю что тем 100500 на форуме, перелопатил половину но нужного не осилил найти уже. Нужна помощь. с JS знаком 2 дня, но...

Таймер - JavaScript
Как сделать так, что бы количество обратных отсчётов было равно количеству элементов массива то-есть массив минут(10,15,5,20). Сколько...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru