当前位置：首页 > PHP

用php实现秒表

2026-02-15 08:13:23PHP

用PHP实现秒表功能

PHP是一种服务器端脚本语言，通常用于处理动态网页内容。虽然PHP主要用于后端逻辑，但结合HTML和JavaScript可以实现秒表功能。以下是几种实现方法：

纯PHP实现（服务器端计时）

这种方法依赖于服务器时间，但会有延迟问题：

<?php
session_start();
if (!isset($_SESSION['start_time'])) {
    $_SESSION['start_time'] = time();
}

$current_time = time();
$elapsed = $current_time - $_SESSION['start_time'];

echo "已过去: " . gmdate("H:i:s", $elapsed);
?>

PHP+JavaScript混合实现（推荐）

更准确的做法是使用PHP初始化计时器，然后用JavaScript处理前端显示：

<?php
// 初始化开始时间
$start_time = microtime(true);
?>

<!DOCTYPE html>
<html>
<head>
    <title>PHP秒表示例</title>
    <script>
        var startTime = <?php echo $start_time; ?> * 1000;

        function updateStopwatch() {
            var currentTime = new Date().getTime();
            var elapsed = currentTime - startTime;

            var hours = Math.floor(elapsed / (1000 * 60 * 60));
            var minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
            var milliseconds = Math.floor(elapsed % 1000);

            document.getElementById('stopwatch').innerHTML = 
                hours.toString().padStart(2, '0') + ":" + 
                minutes.toString().padStart(2, '0') + ":" + 
                seconds.toString().padStart(2, '0') + "." + 
                milliseconds.toString().padStart(3, '0');
        }

        setInterval(updateStopwatch, 10);
    </script>
</head>
<body>
    <div id="stopwatch">00:00:00.000</div>
</body>
</html>

使用AJAX的PHP秒表

对于需要持久化记录的秒表，可以结合AJAX：

<?php
// stopwatch.php
session_start();

if (isset($_GET['action'])) {
    switch ($_GET['action']) {
        case 'start':
            $_SESSION['stopwatch_start'] = microtime(true);
            echo json_encode(['status' => 'started']);
            break;
        case 'stop':
            $elapsed = microtime(true) - $_SESSION['stopwatch_start'];
            echo json_encode(['elapsed' => $elapsed]);
            break;
    }
    exit;
}
?>

<!-- HTML部分 -->
<button onclick="startStopwatch()">开始</button>
<button onclick="stopStopwatch()">停止</button>
<div id="display">0.0000秒</div>

<script>
    function startStopwatch() {
        fetch('stopwatch.php?action=start')
            .then(response => response.json())
            .then(data => console.log(data.status));
    }

    function stopStopwatch() {
        fetch('stopwatch.php?action=stop')
            .then(response => response.json())
            .then(data => {
                document.getElementById('display').innerHTML = data.elapsed.toFixed(4) + '秒';
            });
    }
</script>