Появление содержимого после нажатия на кнопку спустя некоторое время

@ENOVSKIY · Регистрация: 22.04.2017

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

Всем привет! Надеюсь пишу в нужной рубрике. Нужна ваша помощь.

У меня задача такая: есть определенные данные, которые необходимо выводить по нажатию на кнопку "Показать данные", но не сразу а спустя 5 секунд. После нажатия на такую кнопку, должен появиться таймер (простой в виде отсчетом 5 секунд), например "Данные появятся через 5 секунд...", после "Данные появятся через 4 секунд..." и т.д. чтобы человек не попал в замешательство и понял почему данные не появляются сразу и сколько осталось до открытия. После открытия данных, таймер и поясняющий к нему текст должен исчезнуть.

Вот такое нашел в инете:

PHP/HTML

<div id="link">Ждите. Данные подгружаются...</div>
<script type="text/javascript">
var obj = document.getElementById('link');
var timerFIG = 5; // Время в секундах, через которое появляется кнопка
var timer = setInterval("startTimer()",1000);
function startTimer() {
if(timerFIG !== 1) {
timerFIG--;
} else {
clearInterval(timer);
obj.innerHTML = 'Данные к показу после всех действий';
}}
</script>

...и много чего находил еще, но все не то, чего то да в скрипте не хватает, а нужен именно такой. Может кто-то реализовывал такое.

Есть кто знает как решить такое? Прошу помощи!

@sad67man · 02.02.2018, 16:21

ENOVSKIY,

HTML5

1 2	<div id="block"></div> <button onclick='showData()'>Показать данные</button>

Javascript

function showData() {
  var block = document.getElementById('block');
  var timerFIG = 5; // Время в секундах, через которое появляется кнопка
  startTimer();
 
  function startTimer() {
    if (timerFIG > 0) {
      block.innerHTML = 'Данные появятся через ' + timerFIG + ' секунд...';
      timerFIG--;
      setTimeout(startTimer, 1000);
    } else {
      block.innerHTML = 'Данные к показу после всех действий';
    }
  }
}

Добавлено через 6 минут
https://jsfiddle.net/twsbz1tb/

@ENOVSKIY · 05.02.2018, 21:45 **[ТС]**

sad67man, Большое спасибо Вам! Но есть один момент, скорее всего по моей ошибки в пояснениях, кнопка вместе с текстом и таймером не исчезает...

Добавлено через 30 минут
Сделал так

HTML5

1	<div id="block"><button onclick='showData()'>Показать данные</button></div>

Может это калечно, но как мог.

	05.02.2018, 21:45

Появление содержимого после нажатия на кнопку спустя некоторое время

Решение