Básicamente, por diversión, estoy creando un sitio web espeluznante. Una vez que el usuario hace clic en el botón Intro, aparece una cara aterradora. Después de 3 segundos de que aparezca la imagen, quiero otro botón que diga "Continuar" para que el usuario pueda pasar a la siguiente página html pero no tenga idea de cómo hacerlo. No soy muy bueno con Javascript o Jquery. Aquí está todo lo que tengo hasta ahora....
<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>Quizás. Además, tendría más sentido usar la visualización que la visibilidad.
$('#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>Esencialmente, lo que está buscando es setTimeout() , que llamará a la función proporcionada después de un tiempo determinado en milisegundos (3 segundos => 3000 milisegundos).
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">Esta implementación simplemente muestra/oculta algunos elementos HTML siempre que sea necesario, por supuesto, puede eliminarlos por completo del DOM o navegar a otra página . También puede usar la etiqueta
<a>en lugar deContinue<button>u otras soluciones también son posibles.
Se logra un retraso único usando setTimeout (consulte https://developer.mozilla.org/en-US/docs/Web/API/setTimeout )
setTimeout toma dos argumentos, el primero es una referencia a la función que desea ejecutar después del retraso, el segundo es la duración del retraso, en milisegundos:
setTimeout(myfunction(), "1000"); // function myfunction called afer a one second delay;Para funciones simples, como la necesidad de cambiar el estilo de visibilidad de su botón, la función se puede incluir como una función anónima dentro del argumento:
setTimeout(() => { document.getElementsByClassName("delayed")[0].style = "visibility: visible"; }, "3000") // style changes to make button visible after 3 seconds; El fragmento muestra un ejemplo funcional usando setTimeout . También utiliza un detector de eventos para manejar todos los clics, con condicionales para determinar qué botón se presionó. Opcionalmente, puede configurar la visibilidad del primer botón para que se oculte dentro de su evento condicional para que los usuarios no lo presionen repetidamente mientras esperan que suceda algo.
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>