单击第一个按钮后的第二个按钮延迟

Question

所以基本上是为了好玩，我正在制作一个怪异的网站。 一旦用户点击进入按钮，就会弹出一张可怕的脸。 图像弹出 3 秒后，我想要另一个显示“继续”的按钮，以便用户可以转到下一个 html 页面，但不知道如何操作。 我不擅长 Javascript 或 Jquery。 这是我到目前为止所拥有的一切......

    <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
      .header {
      justify-content: center;
      text-align: center;
      font-size: 170%; 
      color: black;
    font-family: Papyrus;
      
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
   padding: 70px 200px;
   margin: 59px;
   background-position: center top;
   background-repeat: no-repeat;
   background-image: url("https://i.postimg.cc/13dfXzBt/Shadow-Men.jpg");
   background-size: 950px 1000px;
   background-color: #000000;
}

button {
  background-color: red;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  font-family: Papyrus;
  font-weight : bold ;
  margin: 0 auto;
  cursor: pointer;
  position: center;
  justify-content: center;
}


#jumpscare{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
visibility:hidden;
}


</style>


<body>

<div class="header">
     <h1><span style="color:red">T</span>he <span style="color:red">E</span>xorcist <span style="color:red">H</span>ouse</h1>
    </div>  
    
<button onclick="jumpscare();"> Enter </button>
<img id="jumpscare" src="img_scaryface.jpg"/>

<script>
function jumpscare(){
var jumpscare = document.getElementById("jumpscare");
jumpscare.style.visibility="visible";
}

</script>

 </body>  
</html>

Answer 1

也许。 此外，使用显示比使用可见性更有意义。

 $('#butonOne').on('click', function(){ $('.image').css('visibility', 'visible') $('#butonOne').css('visibility', 'hidden') $('.image').delay(3000).fadeOut(0) $('#butonTwo').delay(3000).fadeIn(0) })

 #butonTwo{ display: none; } .image{ width: 10rem; height: 10rem; background: blue; visibility: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="butonOne"> Enter </button> <button id="butonTwo"> Enter </button> <div class="image"></div>

Answer 2

本质上，您正在寻找的是setTimeout() ，它将在给定时间（以毫秒为单位）（3 秒 => 3000 毫秒）后调用提供的函数。

 window.addEventListener("DOMContentLoaded", e => { const enterBtn = document.getElementById("enter"); const continueBtn = document.getElementById("continue"); const scaryFace = document.getElementById("scaryFace"); // whenever the enter button is clicked enterBtn.addEventListener("click", e => { console.log("Ahh, jumpscare!") scaryFace.style.visibility = "visible"; setTimeout(() => { // at least 3 seconds are gone => show the "continue" button console.log("3 seconds are gone...") continueBtn.style.visibility = "visible"; }, 3000) }) // when the continue button is clicked continueBtn.addEventListener("click", e => { continueBtn.style.visibility = "hidden"; scaryFace.style.visibility = "hidden"; console.log("Continue with whatever you want to do now"); }) })

 <button id="enter">Enter</button> <button id="continue" style="visibility: hidden;">Continue</button> <img id="scaryFace" style="visibility: hidden;" src="https://dummyimage.com/600x100/000/fff&text=scary+face">

这个实现只是在必要时显示/隐藏一些 HTML 元素，当然您可以将它们从 DOM 中完全删除或导航到另一个页面。 您也可以只使用<a>标签而不是Continue <button>或其他解决方案也是可能的。

Answer 3

使用setTimeout实现一次性延迟（请参阅https://developer.mozilla.org/en-US/docs/Web/API/setTimeout ）

setTimeout有两个参数，第一个是延迟后要执行的函数的引用，第二个是延迟的持续时间，以毫秒为单位：

setTimeout(myfunction(), "1000");
// function myfunction called afer a one second delay;

对于简单的函数，例如您需要更改按钮的可见性样式，该函数可以作为匿名函数包含在参数中：

        setTimeout(() => {
          document.getElementsByClassName("delayed")[0].style = "visibility: visible";
        }, "3000")
// style changes to make button visible after 3 seconds;

该片段显示了一个使用setTimeout的工作示例。 它还使用事件侦听器来处理所有点击，并使用条件来确定按下了哪个按钮。 您可以选择将第一个按钮的可见性设置为隐藏在其事件条件中，以便用户在等待某事发生时不会重复按下它。

 document.addEventListener('click', event => { if (event.target.className == "begin") { // show image; document.getElementsByClassName("scary-image-container")[0].style = "visibility: visible"; // trigger timer for next button; setTimeout(() => { document.getElementsByClassName("delayed")[0].style = "visibility: visible"; }, "3000") } // end if begin button pressed; else if (event.target.className == "delayed") { // link to next page; console.log("enter button pressed"); } // end else if continue button pressed; }); // end event listener;

 .scary-image-container { visibility: hidden; width: 200px; aspect-ratio: 1; background: yellow; } .delayed { visibility: hidden; { }

 <button class="begin">Enter</button> <div class="scary-image-container">Scary Image Here</div> <button class="delayed">continue</button>

Answer 4

我认为您可以尝试这样的事情 - 使用setTimeout()运行一些代码以在显示 jumpscare 后显示继续链接！ 祝你好运😄

 <style> ... #continue-link { display: none; } .continue-link-display { display: block; } </style> <body> ... <a href="/next-page" id="continue-link"> Continue </a> <script> function jumpscare(){ ... setTimeout(() => { const continue = document.getElementById("continue-link") continue.classList.add("continue-link-display") }, 3000) } </script> </body>

单击第一个按钮后的第二个按钮延迟

问题描述

4 个解决方案

解决方案1
0 2022-05-18 23:22:39

解决方案2
0 2022-05-18 23:22:46

解决方案3
0 2022-05-18 23:23:48

解决方案4
0 2022-05-18 23:26:22

单击第一个按钮后的第二个按钮延迟

问题描述

4 个解决方案

解决方案1 0 2022-05-18 23:22:39

解决方案2 0 2022-05-18 23:22:46

解决方案3 0 2022-05-18 23:23:48

解决方案4 0 2022-05-18 23:26:22

解决方案1
0 2022-05-18 23:22:39

解决方案2
0 2022-05-18 23:22:46

解决方案3
0 2022-05-18 23:23:48

解决方案4
0 2022-05-18 23:26:22