单击按钮打开页面 X，直到倒计时打开页面 Y 我正在为我的妻子制作这个惊喜网站，它的索引页面是特定日期之前的倒计时。带有 1 个打开礼物的按钮。现在我希望按钮要么被锁定，直到倒计时完成，要么如果可能的话，让它打开一个页面，我在这里开玩笑说“哦，不，你不”，但如果计时器为 0，那么实际的奖品就会打开。如果这有任何意义的话😅。无论哪种方式，它的工作方式都会令人惊奇。
这是我的代码笔，方便调试和预览：https://codepen.io/Probler/pen/KKLJxqO
enter code here
如果这不是提问的正确地点，那么我很抱歉！但如果你能将我重定向到我应该去的地方，那将会很有帮助。
如果我正确理解你想要什么。所以：
您首先需要创建 2 个 HTML 页面，其中一个是为了惊喜。第二个是“ho no...”
然后将按钮更改为：
<button class="download" onclick="openGift()">Open</button>
并在 JS 中创建函数：
function openGift() {
if (targetDate <= new Date()) {
window.location.href = 'gift.html'
}
else {
window.location.href = 'lock.html'
}
}
完整代码：
const targetDate = new Date('July 15, 2024 00:00:00');
function openGift() {
if (targetDate <= new Date()) {
alert("gift unlocked");
window.location.href = 'gift.html'
}
else {
alert("gift lock");
window.location.href = 'lock.html'
}
}
function updateCountdown() {
const now = new Date();
const remainingTime = targetDate - now;
if (remainingTime <= 0) {
// If the countdown is finished, display all zeros
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
clearInterval(interval); // Stop the countdown
return;
}
// Calculate the time parts
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// Display the time parts in the corresponding span elements
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Update the countdown every second
const interval = setInterval(updateCountdown, 1000);
// Initial call to display the countdown immediately
updateCountdown(); body {
background-color: #1e1f22;
}
.download {
font-family: "JetBrains Mono", monospace;
background-color: #383c44;
height: 35px;
width: 70px;
border-radius: 10px;
border: 0;
box-shadow: none;
text-align: center;
font-size: 23px;
font-weight: bolder;
color: #4cb1c2;
}
.tab {
margin: 3rem;
margin-left: 3.6em;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate(-50%, -50%);
}
h1 {
font-family: "JetBrains Mono", monospace;
font-size: 35px;
white-space: nowrap;
line-height: 0%;
color: white;
}
p {
font-family: "JetBrains Mono", monospace;
font-size: 20px;
padding-top: 3px;
padding-left: 10px;
font-weight: bolder;
color: #abb2bf;
}
.border {
outline: auto;
outline-color: #383c44;
outline-offset: 15px;
outline-width: 5px;
outline-style: solid;
padding: 10px;
border-top-right-radius: 1%;
border-bottom-left-radius: 1%;
border-bottom-right-radius: 1%;
border-top-left-radius: 1%;
}
.window {
background-color: #383c44;
height: 35px;
width: 150px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: left;
}
.win-pos {
transform: translateY(-15px);
}
.dot {
height: 13px;
width: 13px;
background-color: #FF6961;
border-radius: 50%;
transform: translate(126px, -38px);
}<!DOCTYPE html>
<html lang="en">
<body>
<!--Center Content-->
<div class="centered">
<div class="window win-pos">
<p>Countdown</p>
<div class="dot">
</div>
</div>
<div class="border">
<!--Clock-->
<h1>
<span style="color: #c678dd;">Until</span>
<span style="color: #abb2bf;">Gift</span>
<span style="color: #4cb1c2;">:</span>
<span style="color: #ffd700;">{</span>
</h1>
<h1 span class="tab">
<span style="color: #abb2bf;"> 	</span>
<span style="color: #e06c75;">Days</span><span style="color: #4cb1c2;">:</span>
<span style="color: #d19a66;" id="days"></span><span style="color: #abb2bf;">,</span>
</h1>
<h1 span class="tab">
<span style="color: #abb2bf;">	</span>
<span style="color: #e06c75;">Hours</span><span style="color: #4cb1c2;">:</span>
<span style="color: #d19a66;" id="hours"></span><span style="color: #abb2bf;">,</span>
</h1>
<h1 span class="tab">
<span style="color: #abb2bf;">	</span>
<span style="color: #e06c75;">Minutes</span><span style="color: #4cb1c2;">:</span>
<span style="color: #d19a66;" id="minutes"></span><span style="color: #abb2bf;">,</span>
</h1>
<h1 span class="tab">
<span style="color: #abb2bf;">	</span>
<span style="color: #e06c75;">Seconds</span><span style="color: #4cb1c2;">:</span>
<span style="color: #d19a66;" id="seconds"></span><span style="color: #abb2bf;">,</span>
</h1>
<h1 span class="tab">
<span style="color: #abb2bf;">	</span>
<span style="color: #e06c75;">Unlock Gift</span><span style="color: #4cb1c2;">:</span>
<span style="color: #ffd700;">
<button class="download" onclick="openGift()">Open</button>
</span>
<span style="color: #68a66b;" id="period"></span><span style="color: #abb2bf;">,</span>
</h1>
<h1>
<span style="color: #ffd700;">}</span><span style="color: #abb2bf;">;</span>
</h1>
</div>
</div>
</body>
</html>