Question

所以我尝试做一个弹出窗口，它应该像这样工作： 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>

Answer 1

您正在混合可视性和显示。您的超时功能将可见性设置为可见，但显示值仍设置为无。将所有显示“无”更改为可见性“隐藏”。

Answer 2

您的代码有几个问题。

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类，您可以添加或删除该类以显示和隐藏您的元素。我相信这是您入门的好方法。

我希望对您有帮助

Answer 3

我正在用手机打字，但是我无法使用用于轻松编写完整代码的工具，但是请在您的代码中查看以下错误：

您必须在代码中的任何document.之前添加getElementById。
您必须将visible放在“”之间：document.getElementById('bro').style.visibility = "visible";
什么是set（在set.setTimeout中）？从setTimeout()之前删除它。
什么是n.toString()？您必须分配它，而不能直接使用它：.innerHTML=n.toString()
将while放入setInterval()
您已在visibility函数中使用了popup，并在另一个地方使用了display（以更改bro的可见性）。在您的代码中使用其中之一（css，js和html）；
使用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>

setTimeout不显示文本

3 个答案: