HTML 页面中通过判断当前时间是否在设定的有效时间段内，来决定显示正常网页内容还是 “服务到期请联系管理员”

实现思路

设定一个服务到期的截止时间（比如 2026-12-31 23:59:59）。
在页面加载时，用 JavaScript 获取当前系统时间。
对比当前时间和截止时间：
如果当前时间 ≤ 截止时间：显示正常内容；
如果当前时间 > 截止时间：隐藏正常内容，显示到期提示。

期限内显示效果

到期后显示效果

完整代码（可直接复制使用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间验证页面</title>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #333;
        }

        /* 容器通用样式 */
        .container {
            width: 100%;
            max-width: 800px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            background: #fff;
            overflow: hidden;
            transition: all 0.5s ease;
        }

        /* 正常内容样式 */
        .normal-content {
            padding: 40px 50px;
            animation: fadeIn 0.8s ease;
        }

        .normal-content h1 {
            color: #2c5282;
            font-size: 32px;
            margin-bottom: 20px;
            font-weight: 600;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 15px;
        }

        .normal-content p {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 15px;
            color: #4a5568;
        }

        .time-info {
            margin-top: 30px;
            padding: 15px;
            background-color: #e8f4f8;
            border-radius: 8px;
            font-size: 16px;
            color: #2d3748;
        }

        .time-info span {
            font-weight: 600;
            color: #2c5282;
        }

        /* 到期提示样式 */
        .expired-tip {
            padding: 80px 40px;
            text-align: center;
            background: linear-gradient(135deg, #fef7fb 0%, #fdf2f8 100%);
            animation: fadeIn 0.8s ease;
        }

        .expired-tip h2 {
            color: #e53e3e;
            font-size: 36px;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .expired-tip p {
            font-size: 18px;
            color: #718096;
            margin-top: 15px;
        }

        .expired-icon {
            font-size: 60px;
            color: #e53e3e;
            margin-bottom: 20px;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .normal-content {
                padding: 25px 20px;
            }

            .normal-content h1 {
                font-size: 26px;
            }

            .normal-content p {
                font-size: 16px;
            }

            .expired-tip h2 {
                font-size: 28px;
            }

            .expired-icon {
                font-size: 45px;
            }
        }
    </style>
    <!-- 引入图标库（用于到期提示的图标） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 主容器 -->
    <div class="container">
        <!-- 正常网页内容容器 -->
        <div id="normalContent" class="normal-content">
            <h1>欢迎访问我们的网站</h1>
            <p>这是您的专属服务内容，仅在有效期内可见。</p>
            <p>您可以在这里查看、使用各项服务功能。</p>
            <div class="time-info">
                当前系统时间：<span id="currentTime"></span>
            </div>
        </div>

        <!-- 服务到期提示容器（默认隐藏） -->
        <div id="expiredTip" class="expired-tip" style="display: none;">
            <div class="expired-icon">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <h2>服务到期</h2>
            <p>您的服务已超出有效期，请联系管理员续费后继续使用</p>
            <p>联系电话：400-XXXX-XXXX | 邮箱：admin@example.com</p>
        </div>
    </div>

    <script>
        // 核心配置：修改这里的截止时间即可
        // 格式：年-月-日 时:分:秒（注意月份是0-11，比如12月写11）
        const expireTime = new Date(2026, 11, 31, 23, 59, 59); // 2026年12月31日23:59:59
        
        // 获取当前时间
        const now = new Date();
        
        // 显示格式化的当前时间
        const formatTime = (date) => {
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        };
        document.getElementById('currentTime').textContent = formatTime(now);

        // 时间判断逻辑
        const normalContent = document.getElementById('normalContent');
        const expiredTip = document.getElementById('expiredTip');
        
        if (now > expireTime) {
            // 超出有效期：隐藏正常内容，显示到期提示
            normalContent.style.display = 'none';
            expiredTip.style.display = 'block';
        } else {
            // 有效期内：正常显示内容，隐藏提示
            normalContent.style.display = 'block';
            expiredTip.style.display = 'none';
        }
    </script>
</body>
</html>

关键代码解释
截止时间设置：

const expireTime = new Date(2026, 11, 31, 23, 59, 59);

new Date(年, 月, 日, 时, 分, 秒) 是 JavaScript 创建时间对象的方式；
注意：月份是0 开始的（0=1 月，11=12 月），不要直接写 12。
时间对比：

if (now > expireTime) { ... }

JavaScript 中时间对象可以直接用 >/< 对比，本质是对比时间戳（毫秒数）。
显示 / 隐藏控制：
通过修改元素的 style.display 属性，控制内容的显示状态：
display: none：隐藏元素（不占页面空间）；
display: block：显示元素（块级元素）。
自定义修改建议
修改截止时间：直接改 new Date() 里的参数即可，比如想设置到 2025 年 6 月 30 日，写 new Date(2025, 5, 30, 23, 59, 59)；
美化提示样式：修改 .expired-tip 里的 CSS（比如字体、颜色、背景）；
替换正常内容：把

里的内容换成你的实际网页内容。
总结
核心逻辑是当前时间 vs 截止时间的对比，通过 JavaScript 实现；
页面加载时自动执行判断，无需用户操作；
只需修改 expireTime 变量即可调整有效期，其余代码无需改动；
该方案基于前端实现，若需更安全的验证（防止用户修改本地时间），需结合后端接口返回截止时间。