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

@Konstantin102 · Регистрация: 28.12.2009

Author24 — интернет-сервис помощи студентам

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

@Kurles · 08.06.2015, 16:36

HTML-код:

HTML5

<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

 button {
            background-color: aquamarine;
        }
 
        button.red {
            background-color: red;
        }

Песочница: http://jsfiddle.net/dmbgn33s/

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

HTML-код:

PHP/HTML

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

@Konstantin102 · 08.06.2015, 18:02 **[ТС]**

Спасибо вы мне очень помогли, но у меня еще один вопрос. У меня на сайте много кнопок, я пишу
CSS:

CSS

 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:

PHP/HTML

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

Но при нажатии на первую кнопку или на вторую кнопку все равно не активная только вторая, в чем моя ошибка?

@Kurles · 08.06.2015, 18:47

PHP/HTML

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

@Konstantin102 · 08.06.2015, 18:55 **[ТС]**

Еще раз спасибо, но я так понял что обе кнопки обращаются к одной функции, а мне надо что бы таймер неактивности у каждой кнопки был отдельный.

@Kurles · 08.06.2015, 19:17

Там так и получается. Забавная штука javascript, одно и то же действие совершенно разными способами можно добиться

HTML-код:

HTML5

<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

(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');
}

третий вариант

@wm_zar · 21.07.2016, 12:58

Возможли ли сделать, чтобы для каждой кнопки было разное время таймера?

@Konstantin102 1 / 1 / 0 Регистрация: 28.12.2009 Сообщений: 96
		1
	Таймер на сайте 08.06.2015, 15:48. Показов 1267. Ответов 6 Метки нет (Все метки) Здравствуйте, подскажите пожалуйста как на сайте сделать что бы после нажатия кнопки запускался таймер в заместо кнопки, а по окончании отсчета кнопка опять стала активной. Сам таймер есть. 0

@Konstantin102 1 / 1 / 0 Регистрация: 28.12.2009 Сообщений: 96
	08.06.2015, 18:55 [ТС]	5
	Еще раз спасибо, но я так понял что обе кнопки обращаются к одной функции, а мне надо что бы таймер неактивности у каждой кнопки был отдельный. 0

@wm_zar 0 / 0 / 0 Регистрация: 21.07.2016 Сообщений: 1
	21.07.2016, 12:58	7
	Возможли ли сделать, чтобы для каждой кнопки было разное время таймера? 0