setTimeout не показывает текст - PullRequest
Новая
       1

setTimeout не показывает текст

0 голосов
/ 23 октября 2018

Так что я пытаюсь сделать всплывающее окно, и оно будет работать так: через 3 секунды он покажет кнопку закрытия, но пока вы ждете 3 секунды, будет обратный отсчет.Моя проблема в том, что не отображается текст 

var n = 3;

function popup() {
  set.setTimeout(function() {
    getElementById('bro').style.visibility = visible;
  }, 3000);
  
  while (n > 0) {
    set.setTimeout(function() {
      n--;
    }, 1000);
    n.toString()
    getElementById('texto').innerHTML = n;
  }
}

function bro() {
  getElementById('bro').style.display = "none";
  getElementById('texto').style.display = "none";
  getElementsByName('block').style.display = "none";
}
#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  visibility: hidden;
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 1;
}

aside {
  position: absolute;
  justify-content: center;
  width: 600px;
  height: 500px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}
<body onload="popup()">
  <p id="texto" color="red">3</p>
  <button id="bro" onclick="bro()">close</button>
  <aside name="block"></aside>
</body>

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

Я набираю текст на своем мобильном телефоне, и у меня нет доступа к инструменту для простого написания полного кода, но посмотрите на эти ошибки в своем коде:

  1. Вы должны добавить document. перед любым getElementById в вашем коде.
  2. Вы должны заключить visible между "": document.getElementById('bro').style.visibility = "visible";
  3. Что такое set (в set.setTimeout)?удалите его до setTimeout().
  4. Что такое n.toString() ?.Вы должны назначить его, не используя его напрямую: .innerHTML=n.toString()
  5. Поместите while в setInterval()
  6. Вы использовали visibility в popup функции и display в другомместо (для изменения видимости bro).Используйте один из них в своем коде (css и js и html);
  7. Используйте document.querySelector('[name="block"]').style.display = "none"; для сокрытия элемента block.8- Измените z-index из #texto на 3.

Обновленная деталь:

Теперь вы можете проверить результат здесь. это сам ваш код что его проблемы были решены: 

#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  visibility: hidden;
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 3;
  font-size: 20pt;
}

aside {
  position: absolute;
  justify-content: center;
  width: 600px;
  height: 500px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}
 <body onload='popup()'>
  <p id="texto" color="red">3</p>
  <button id="bro" onclick="bro()">close</button>
  <aside name="block"></aside>
  <script>
    var n = 3;
    function popup() {
      setTimeout(function() {
        document.getElementById('bro').style.visibility="visible";
      }, 3000);

      var t2=setInterval(function() {
        debugger
        if(n--==0) clearInterval(t2);
        else document.getElementById("texto").innerHTML=n+"";
      }, 1000);

    }

    function bro() {
      document.getElementById('bro').style.visibility = "hidden";
      document.getElementById('texto').style.display = "none";
      document.querySelector('[name="block"]').style.display = "none";
    }
  </script>
</body>
0 голосов
/ 23 октября 2018

Ваш код имеет несколько проблем с ним.

  • Что такое свойство set?
  • Ваш setTimeout будет выполняться почти каждый раз.
  • Вам нужно использовать целый второй setTimeout и проверить текущий цикл, если совпадает n, тогда вы отображаете кнопку закрытия.

Я немного переработал ваш код и должен выглядеть примерно так: 

let n = 3;
let c = 0; // counter

const hideAll = () => { 
  hide(document.getElementById('texto'));
  hide(document.getElementById('bro'));
  hide(document.getElementById('block'));
}

const show = (el) => el.classList.remove('hidden');
const hide = (el) => el.classList.add('hidden');

const showPopup = () => { 
  show(document.getElementById('block'));
  startCountingDown();
}

const startCountingDown = () => setTimeout( countdown,  1000 );

const countdown = () => { 
  if(c < n) { 
    c++;
    let texto = document.getElementById('texto');
    texto.innerHTML = c.toString();
    show(texto);
    startCountingDown();
  } else { 
    show(document.getElementById('bro'));
  }
}

showPopup();
.hidden { display: none; }
#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  /*visibility: hidden;*/
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 3;
  color: red;
  font-size: 50px;
  margin-left: 40px;
  margin-top: 25px;
}

aside {
  position: absolute;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}
<p id="texto" class="hidden">1</p>
<button id="bro" onclick="hideAll()" class="hidden">close</button>
<aside name="block" id="block" class="hidden"></aside>

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

Надеюсь, это поможет

0 голосов
/ 23 октября 2018

Вы смешиваете видимость и отображение.Ваша функция тайм-аута устанавливает видимость видимой, но значение дисплея по-прежнему не установлено.Измените все отображение «нет» на видимость «скрыто».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...