我需要在 HTML 页面上创建一个只能在特定时间单击的链接。我有以下代码，但它似乎不起作用。最好该链接应在特定时间和日期处于活动状态。例如，该链接可能在 2024 年 10 月 24 日上午 10:00 处于活动状态，然后在特定时间或数小时后处于非活动状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#myButton {
padding: 10px 20px;
background-color: gray;
color: white;
border: none;
text-decoration: none;
display: inline-block;
pointer-events: none;
cursor: not-allowed;
}
#myButton.active {
background-color: blue;
cursor: pointer;
pointer-events: auto;
}
#myButton.disabled {
background-color: red;
cursor: not-allowed;
pointer-events: none;
}
</style>
</head>
<body>
<h1>Click the link between 10:00 AM and 10:15 AM Eastern Time</h1>
<a href="#" class="disabled" id="myButton">Link Disabled</a>
<script>
const easternTimeOffset = -4;
const targetStartDate = new Date();
const targetEndDate = new Date();
targetStartDate.setUTCHours(10 + easternTimeOffset, 0, 0, 0);
targetEndDate.setUTCHours(10 + easternTimeOffset, 15, 0, 0);
const button = document.getElementById("myButton");
function checkTime() {
const now = new Date();
if (now >= targetStartDate && now < targetEndDate) {
button.href = "https://www.britannica.com/science/world-map";
button.classList.add("active");
button.classList.remove("disabled");
button.textContent = "Click Me Now!";
} else if (now >= targetEndDate) {
button.href = "#";
button.classList.remove("active");
button.classList.add("disabled");
button.textContent = "Link Disabled";
}
}
checkTime();
setInterval(checkTime, 1000);
</script>
</body>
</html>// Get the button element
const button = document.getElementById("clickMe");
// Get the current time in EST
const now = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
const currentTime = new Date(now);
// Set the target time to 2:55 PM EST, I used this time because I'm testing now.
const targetTime = new Date(now);
targetTime.setHours(14, 55, 0, 0);
// If the current time is after 2:55 PM EST and before 3:00 PM EST, remove the "disabled" class
if (currentTime > targetTime && currentTime < targetTime.setMinutes(60)) {
button.classList.remove("disabled");
} else {
// Otherwise, add the "disabled" class
button.classList.add("disabled");
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Used bootstrap to style -->
<div class="container">
<div class="row mt-5">
<div class="col-3">
<button type="button" class="btn btn-outline-primary disabled" id="clickMe">Link</button>
</div>
</div>
</div>