javascript 定時器結束后顯示頁面的隱藏部分

Question

我希望能夠使用計時器隱藏網站的一部分，並且在計時器結束后，用戶能夠看到隱藏的部分
這是我到目前為止所做的腳本

 // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);

 <p id="demo"></p>

Answer 1

只顯示 div

您可以刪除 class 或更改顯示或更改。隱藏

 // Set the date we're counting down to var countDownDate = new Date(); countDownDate.setTime(countDownDate.getTime() + 5000); // demo // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; document.getElementById("hidden1").classList.remove("hide"); document.getElementById("hidden2").style.display = "block"; document.getElementById("hidden3").hidden=false; } }, 1000);

 .hide { display: none; }

 <p id="demo"></p> <div id="hidden1" class="hide">Show this when expired (class)</div> <div id="hidden2" class="hide">Show this when expired (display)</div> <div id="hidden3" hidden>Show this when expired (hidden)</div>