PHP网页时钟源代码如何实现？-网页设计-锦华智联科技

静态时钟：页面加载时显示一次当前时间，之后不会自动更新，这是最基础、最常用的方法。
动态时钟：页面加载后，时间会每秒自动更新一次，像电子表一样，这需要结合一点 JavaScript。

静态时钟（纯 PHP）

这种方法最简单,PHP 在服务器上执行，然后将生成的 HTML 发送到浏览器，时钟只会在你刷新页面时更新。

（图片来源网络，侵删）

源代码 (`static_clock.php`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">PHP 静态时钟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #2c3e50;
            font-family: 'Arial', sans-serif;
            color: white;
        }
        .clock-container {
            text-align: center;
            background-color: #34495e;
            padding: 40px 60px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        h1 {
            margin-top: 0;
            color: #ecf0f1;
        }
        #clock {
            font-size: 4em;
            font-weight: bold;
            color: #3498db;
            margin-top: 20px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <h1>PHP 静态时钟</h1>
        <!-- 
            PHP 代码在这里执行。
            date() 函数用于格式化日期和时间。
            "Y-m-d H:i:s" 是一个格式化字符串：
            Y: 四位数的年份 (e.g., 2025)
            m: 两位数的月份 (01-12)
            d: 两位数的日期 (01-31)
            H: 24小时制的小时 (00-23)
            i: 分钟 (00-59)
            s: 秒 (00-59)
        -->
        <div id="clock">
            <?php echo date("Y-m-d H:i:s"); ?>
        </div>
    </div>
</body>
</html>

如何运行

确保你的电脑上安装了 PHP 环境（如 XAMPP, WAMP, MAMP 或 Docker）。
将上面的代码保存为一个文件,static_clock.php。
将该文件放入你的 Web 服务器的根目录（XAMPP 的 htdocs 文件夹）。
在浏览器中访问 http://localhost/static_clock.php。

你将看到一个显示当前时间的网页,如果你刷新页面，时间会更新。

动态时钟（PHP + JavaScript）

这种方法更酷炫,PHP 在页面加载时提供初始时间，JavaScript 在浏览器端接管，每秒更新一次时间，无需刷新页面。

源代码 (`dynamic_clock.php`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">PHP 动态时钟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #2c3e50;
            font-family: 'Arial', sans-serif;
            color: white;
        }
        .clock-container {
            text-align: center;
            background-color: #34495e;
            padding: 40px 60px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        h1 {
            margin-top: 0;
            color: #ecf0f1;
        }
        #clock {
            font-size: 4em;
            font-weight: bold;
            color: #e74c3c; /* 使用了不同的颜色来区分 */
            margin-top: 20px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <h1>PHP 动态时钟</h1>
        <!-- 
            PHP 在这里输出初始时间，并赋值给 JavaScript 变量 initialTime。
            这样 JavaScript 就知道了服务器当前的时间，可以在此基础上进行更新。
        -->
        <div id="clock">
            <?php 
                // 输出初始时间，并赋值给一个 JavaScript 变量
                echo "<script>var initialTime = '" . date("Y-m-d H:i:s") . "';</script>";
                // 同时在页面上也显示一次初始时间
                echo date("Y-m-d H:i:s"); 
            ?>
        </div>
    </div>
    <script>
        // 获取显示时间的 div 元素
        const clockElement = document.getElementById('clock');
        // 更新时钟的函数
        function updateClock() {
            // 从 PHP 传递过来的初始时间创建一个 Date 对象
            let now = new Date(initialTime);
            // 每次调用函数，时间增加一秒
            now.setSeconds(now.getSeconds() + 1);
            // 格式化时间，确保时分秒都是两位数
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // getMonth() 返回 0-11
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            // 将格式化后的时间显示在页面上
            clockElement.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        // 页面加载完成后，立即执行一次 updateClock
        updateClock();
        // 然后设置一个定时器，每 1000 毫秒（1秒）调用一次 updateClock 函数
        setInterval(updateClock, 1000);
    </script>
</body>
</html>

如何运行

同样,确保你的 PHP 环境已经配置好。
将上面的代码保存为 dynamic_clock.php 文件。
放入 Web 服务器的根目录。
在浏览器中访问 http://localhost/dynamic_clock.php。

你将看到一个时钟,它会从 PHP 提供的初始时间开始，然后每秒自动跳动更新。

总结与对比

特性	静态时钟 (纯 PHP)	动态时钟 (PHP + JavaScript)
实现原理	服务器端生成，客户端只显示。	服务器端提供初始值，客户端定时更新。
更新方式	刷新页面时更新。	每秒自动更新，无需刷新。
技术组合	仅 PHP + HTML/CSS	PHP + HTML/CSS + JavaScript
适用场景	显示一个固定的、只在特定时刻需要更新的时间，如文章发布时间。	需要实时显示当前时间的场景，如仪表盘、主页等。
优点	简单、直接，服务器负载极低。	用户体验好，无需刷新即可看到变化。
缺点	不够动态，用户体验稍差。	需要客户端支持 JavaScript。

对于制作一个“网页时钟”这个需求，两种方法都很好。动态时钟在视觉效果上更吸引人，而静态时钟则在概念上更纯粹地展示了 PHP 的服务器端能力，你可以根据自己的需求选择使用。

（图片来源网络，侵删）

PHP网页时钟源代码如何实现？

静态时钟（纯 PHP）

源代码 (static_clock.php)

如何运行

动态时钟（PHP + JavaScript）

源代码 (dynamic_clock.php)

如何运行

总结与对比

源代码 (`static_clock.php`)

源代码 (`dynamic_clock.php`)