JavaScript时间判断：实现21:00-6:00登录权限的逻辑疑问

Hey there! Let's break down your problem clearly—since you mentioned your English is limited, we’ll keep things simple and straight to the point.

First: You Don’t Need a for(;;) Loop #

A for(;;) is an infinite loop that runs non-stop, which would freeze your browser entirely. That’s totally unnecessary here! We only need to check the current time once when the page loads, and optionally when the user tries to log in. If you want to update access status in real-time (like if the clock hits 6:00 while the user is on the page), we can use a timed check instead of a dead loop.

Fixing Your If Statement #

The key mistake is probably not covering both parts of your allowed time window:

• 21:00 (9 PM) to 23:59 (11:59 PM)
• 00:00 (midnight) to 06:00 (6 AM)

Your if condition needs to check for either of these two cases using the || (OR) operator. Here’s how to do it properly with JavaScript (since HTML alone can’t handle time logic):

Full Working Example #

<!DOCTYPE html>
<html>
<head>
    <title>Time-Limited Login</title>
</head>
<body>
    <!-- Login Form (hidden by default if outside allowed hours) -->
    <div id="loginForm">
        <h3>Login</h3>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="attemptLogin()">Submit</button>
    </div>

    <!-- Access Denied Message (hidden by default) -->
    <div id="deniedMessage" style="display: none; color: red;">
        <p>Login is only available between 21:00 (9 PM) and 06:00 (6 AM).</p>
    </div>

    <script>
        // Check access when the page loads
        window.onload = checkAccess;

        function checkAccess() {
            const currentHour = new Date().getHours();
            const isAllowed = currentHour >= 21 || currentHour < 6;

            // Show/hide elements based on access
            document.getElementById("loginForm").style.display = isAllowed ? "block" : "none";
            document.getElementById("deniedMessage").style.display = isAllowed ? "none" : "block";
        }

        function attemptLogin() {
            const currentHour = new Date().getHours();
            if (currentHour >= 21 || currentHour < 6) {
                // Here you'd add your actual login logic (e.g., send data to a server)
                alert("Login access granted! Processing your credentials...");
            } else {
                alert("Sorry, login is only allowed between 9 PM and 6 AM.");
                checkAccess(); // Update the UI just in case
            }
        }

        // Optional: Refresh access status every minute (for real-time updates)
        setInterval(checkAccess, 60000);
    </script>
</body>
</html>

Key Notes About the Code: #

• new Date().getHours() gives us the current hour in 24-hour format (0 = midnight, 23 = 11 PM)
• The condition currentHour >= 21 || currentHour < 6 correctly covers both parts of your allowed window
• window.onload runs the check as soon as the page loads, so users don’t see the login form if it’s outside hours
• The optional setInterval(checkAccess, 60000) refreshes the check every 60 seconds—this is useful if someone leaves the page open overnight, but it’s not required
• We never use for(;;) because it would crash the browser

If Your Original If Statement Was Wrong... #

Chances are it only checked one part of the window (like if (currentHour >=21) and forgot the currentHour <6 part). The fix is adding the OR condition to cover both time ranges.

Hope this makes sense! Let me know if you need clarification on any part.

内容的提问来源于stack exchange，提问作者Dôn Kayt