所以基本上是為了好玩，我正在制作一個怪異的網站。一旦用戶點擊進入按鈕，就會彈出一張可怕的臉。影像彈出 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>
uj5u.com熱心網友回復：
也許。此外，使用顯示比使用可見性更有意義。
$('#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>uj5u.com熱心網友回復：
本質上，您正在尋找的是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>tag 而不是 aContinue<button>或其他解決方案也是可能的。
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
我認為您可以嘗試這樣的事情 - 使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477455.html
標籤：javascript html