当前位置：首页 > PHP

php实现钟表

2026-02-28 06:51:23PHP

PHP实现钟表功能

使用PHP可以创建一个动态显示当前时间的钟表。以下是实现方法：

基础时钟实现

<?php
date_default_timezone_set('Asia/Shanghai');
$current_time = date('H:i:s');
echo "当前时间: " . $current_time;
?>

带自动刷新的HTML时钟

<!DOCTYPE html>
<html>
<head>
    <title>PHP时钟</title>
    <meta http-equiv="refresh" content="1">
    <style>
        .clock {
            font-size: 48px;
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <?php echo date('H:i:s'); ?>
    </div>
</body>
</html>

使用JavaScript增强的PHP时钟

php实现钟表

<!DOCTYPE html>
<html>
<head>
    <title>增强时钟</title>
    <script>
        function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds;
            setTimeout(updateClock, 1000);
        }
    </script>
    <style>
        #clock {
            font-family: Arial, sans-serif;
            font-size: 48px;
            color: #333;
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body onload="updateClock()">
    <div id="clock"></div>
    <div style="text-align: center;">
        <?php echo "服务器时间: " . date('Y-m-d H:i:s'); ?>
    </div>
</body>
</html>

带有时针、分针和秒针的图形时钟

<!DOCTYPE html>
<html>
<head>
    <title>图形时钟</title>
    <style>
        .clock {
            width: 300px;
            height: 300px;
            border: 10px solid #333;
            border-radius: 50%;
            position: relative;
            margin: 50px auto;
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: 50% 100%;
        }
        .hour-hand {
            width: 8px;
            height: 80px;
            background: #000;
            margin-left: -4px;
        }
        .minute-hand {
            width: 4px;
            height: 120px;
            background: #333;
            margin-left: -2px;
        }
        .second-hand {
            width: 2px;
            height: 140px;
            background: red;
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <?php
        $hour = date('g');
        $minute = date('i');
        $second = date('s');

        $hour_deg = ($hour * 30) + ($minute * 0.5);
        $minute_deg = $minute * 6;
        $second_deg = $second * 6;
        ?>
        <div class="hand hour-hand" style="transform: rotate(<?php echo $hour_deg; ?>deg);"></div>
        <div class="hand minute-hand" style="transform: rotate(<?php echo $minute_deg; ?>deg);"></div>
        <div class="hand second-hand" style="transform: rotate(<?php echo $second_deg; ?>deg);"></div>
    </div>

    <script>
        function updateClock() {
            var now = new Date();
            var hour = now.getHours() % 12;
            var minute = now.getMinutes();
            var second = now.getSeconds();

            var hourDeg = (hour * 30) + (minute * 0.5);
            var minuteDeg = minute * 6;
            var secondDeg = second * 6;

            document.querySelector('.hour-hand').style.transform = 'rotate(' + hourDeg + 'deg)';
            document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteDeg + 'deg)';
            document.querySelector('.second-hand').style.transform = 'rotate(' + secondDeg + 'deg)';

            setTimeout(updateClock, 1000);
        }
        updateClock();
    </script>
</body>
</html>