Как сделать таймер обратного отсчёта по нажатию на кнопку и сделать её неактивной

@vitos285380308 · Регистрация: 25.04.2016

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

Снова пишу сюда, ибо нигде больше помощи не дождёшься

Мне тут нужно сделать такую штуку: чтобы при нажатии на кнопку сработал таймер обратного отсчёта и кнопка при этом стала неактивной пока таймер не закончит отсчёт. Значение таймера естественно показывается на странице сайта. Я нашёл только, как можно сделать таймер, а вот чтобы с блокировкой кнопки я не догоняю как сделать.

PHP/HTML
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
32
33
34
35
36
37
38
39
40
41
42
43
<script>
    function timer(){
 
        var hour = document.getElementById('hour').innerHTML;
        var minute = document.getElementById('minute').innerHTML;
        var second = document.getElementById('second').innerHTML;
        var end = false;
         
        if( second > 0 ) second--;
        else{
            second = 60;
             
            if( minute > 0 ) minute--;
            else{
                second = 60;
                 
                if( hour > 0 ) hour--;
                else end = true;
            }
        }
 
        if(end){
            clearInterval(intervalID);
            alert("Таймер сработал!");
        }else{
            document.getElementById('hour').innerHTML = hour;
            document.getElementById('minute').innerHTML = minute;
            document.getElementById('second').innerHTML = second;
        }
    }
    window.intervalID = setInterval(timer, 1000);
}
</script>
</head>
<body>
 
    <div id="timer">
        <div id="hour">10</div>&nbsp;:
        <div id="minute">00</div>&nbsp;:
        <div id="second">00</div>
    </div>
 
</body>

@Пифагор · 07.03.2017, 22:45

В общих чертах примерно так:
Создаете какой-нить <input type="button" id="button">.
И далее

JavaScript
1
2
3
4
5
6
7
8
9
10
if(end){ //насколько я понял, это значит что таймер отщелкал
  clearInterval(intervalID);
  alert("Таймер сработал!");
  button.removeAttribute("disabled");
}else{
  document.getElementById('hour').innerHTML = hour;
  document.getElementById('minute').innerHTML = minute;
  document.getElementById('second').innerHTML = second;
  button.setAttribute("disabled", "disabled");
}

@BANO · 07.03.2017, 23:31

Дерьмовый у вас конечно таймер... Но вот:
песочница

JavaScript
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
32
33
34
35
36
37
38
39
40
asdf.onclick = function() {
    asdf.disabled = true
    window.intervalID = setInterval(timer, 1000);
 
}
 
function timer() {
 
    var hour = document.getElementById('hour').innerHTML,
        minute = document.getElementById('minute').innerHTML,
        second = document.getElementById('second').innerHTML,
        end = false;
 
    if (second > 0)
        second--;
    else {
        second = 59;
 
        if (minute > 0)
            minute--;
        else {
            minute = 59;
 
            if (hour > 0)
                hour--;
            else {
                asdf.disabled = !(end = true);
            }
        }
    }
 
    if (end) {
        clearInterval(intervalID);
        alert("Таймер сработал!");
    } else {
        document.getElementById('hour').innerHTML = hour;
        document.getElementById('minute').innerHTML = minute;
        document.getElementById('second').innerHTML = second;
    }
}

HTML5
1
2
3
4
5
6
<div id="timer">
    <span id="hour">0</span>&nbsp;:
    <span id="minute">0</span>&nbsp;:
    <span id="second">10</span>
</div>
<button id="asdf">Клик</button>

@kalabuni · 08.03.2017, 00:46

Сообщение от BANO

Дерьмовый у вас конечно таймер...

"не судите, да не судимы будете" (с)
чем именно ваш-то "более лучше" (с)?

@vitos285380308 · 08.03.2017, 10:58 **[ТС]**

Спасибо за варианты

Буду пробовать

Новые блоги и статьи Все статьи Все блоги /
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

@vitos285380308 0 / 0 / 2 Регистрация: 25.04.2016 Сообщений: 71
	08.03.2017, 10:58 [ТС]
	Спасибо за варианты Буду пробовать 0