蓝极冰焰 2024-09-11 20:53 采纳率: 42.3%
浏览 7
已结题

关于一个倒计时的操作和显示设计

我想实现一个倒计时的功能：
在第1个页面上只能查看到倒计时的信息，
在第2个页面上可以查看倒计时信息，并且能够操作“开始”、“停止”、“暂停”及“继续”的功能，
两个页面均不受页面的刷新而重置等影响。
PHP为主
请问有没有什么简单易懂的演示？

  • 写回答

18条回答 默认 最新

  • 才华横溢caozy 2024-09-12 07:40
    关注

    以下答案是由GPT4-pro回答，本人整理后的结果，如有帮助，还请采纳！
    要实现一个倒计时功能，其中一个页面只显示倒计时信息，另一个页面可以控制倒计时（开始、停止、暂停、继续），并且两个页面不受刷新影响，可以使用PHP和JavaScript来完成。下面将提供具体的解决思路和代码示例。

    设计思路

    1. 倒计时的状态存储：

      • 由于要求页面不受刷新影响，因此需要在服务器端（如数据库或文件）存储倒计时的状态。我们可以使用数据库来保存当前的倒计时开始时间、暂停时间、倒计时时间等信息。
      • 同时，倒计时的状态（开始、暂停、停止）也需要在服务器端存储。

    2. 两个页面的功能：

      • 第一个页面只显示倒计时信息。
      • 第二个页面具有控制功能，能通过按钮开始、暂停、继续和停止倒计时。
      • 每次对倒计时的操作都通过Ajax请求将状态更新到服务器，并同步到两个页面。

    3. 前端页面显示：

      • 使用JavaScript在页面中动态显示倒计时，并定期从服务器获取倒计时的最新状态，确保信息同步。

    主要步骤：

    1. 数据库表设计（假设使用MySQL）：

      • 我们需要一个表来存储倒计时的信息，比如当前倒计时的状态、倒计时的总时长等。
        CREATE TABLE countdown (
  id INT PRIMARY KEY AUTO_INCREMENT,
  total_time INT NOT NULL,        -- 倒计时总时长（秒）
  start_time DATETIME,            -- 开始时间
  paused_time DATETIME,           -- 暂停时间
  status ENUM('stopped', 'running', 'paused') DEFAULT 'stopped' -- 当前倒计时状态
);

    2. PHP后台逻辑：

      • 我们需要创建两个API接口，一个用来获取倒计时信息，一个用来控制倒计时（开始、暂停、继续、停止）。

      • **获取倒计时状态接口 (get_status.php)**：
        这个接口将返回当前倒计时的状态信息，包括剩余时间和倒计时状态。

        <?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');

// 查询倒计时信息
$result = $conn->query("SELECT * FROM countdown WHERE id = 1");
$row = $result->fetch_assoc();

$status = $row['status'];
$total_time = $row['total_time'];
$start_time = strtotime($row['start_time']);
$paused_time = strtotime($row['paused_time']);

// 计算剩余时间
if ($status == 'running') {
    $elapsed = time() - $start_time; // 已经过去的时间
    $remaining_time = max(0, $total_time - $elapsed); // 剩余时间
} elseif ($status == 'paused') {
    $elapsed = $paused_time - $start_time;
    $remaining_time = max(0, $total_time - $elapsed);
} else {
    $remaining_time = $total_time;
}

// 返回JSON格式的倒计时信息
echo json_encode([
    'status' => $status,
    'remaining_time' => $remaining_time
]);
?>

      • **控制倒计时的接口 (control.php)**：
        这个接口接收操作命令（开始、暂停、继续、停止），并根据操作更新数据库中的状态。

        <?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');

// 获取操作命令
$action = $_POST['action'];

// 处理不同的操作
if ($action == 'start') {
    $total_time = $_POST['total_time']; // 设置倒计时总时长（秒）
    $conn->query("UPDATE countdown SET total_time = $total_time, start_time = NOW(), status = 'running' WHERE id = 1");
} elseif ($action == 'pause') {
    $conn->query("UPDATE countdown SET paused_time = NOW(), status = 'paused' WHERE id = 1");
} elseif ($action == 'continue') {
    $result = $conn->query("SELECT * FROM countdown WHERE id = 1");
    $row = $result->fetch_assoc();
    $paused_time = strtotime($row['paused_time']);
    $start_time = strtotime($row['start_time']);
    $elapsed = $paused_time - $start_time; // 暂停前经过的时间
    $conn->query("UPDATE countdown SET start_time = DATE_ADD(NOW(), INTERVAL -$elapsed SECOND), status = 'running' WHERE id = 1");
} elseif ($action == 'stop') {
    $conn->query("UPDATE countdown SET status = 'stopped' WHERE id = 1");
}

echo json_encode(['success' => true]);
?>

    3. 前端页面显示和操作：

      • **第一个页面 (只显示倒计时) (index.php)**：
        通过JavaScript定期请求倒计时信息，并在页面上更新倒计时。

        <!DOCTYPE html>
<html>
<head>
    <title>倒计时页面</title>
    <script>
        function updateCountdown() {
            fetch('get_status.php')
                .then(response => response.json())
                .then(data => {
                    const remainingTime = data.remaining_time;
                    const minutes = Math.floor(remainingTime / 60);
                    const seconds = remainingTime % 60;
                    document.getElementById('countdown').innerText = `${minutes} 分 ${seconds} 秒`;

                    if (remainingTime > 0 && data.status === 'running') {
                        setTimeout(updateCountdown, 1000);
                    }
                });
        }

        // 页面加载时启动
        window.onload = updateCountdown;
    </script>
</head>
<body>
    <h1>倒计时</h1>
    <div id="countdown">加载中...</div>
</body>
</html>

      • **第二个页面 (可以控制倒计时) (control.php)**：
        这个页面提供倒计时的控制按钮，并通过Ajax请求与服务器通信。

        <!DOCTYPE html>
<html>
<head>
    <title>倒计时控制</title>
    <script>
        function control(action) {
            const formData = new FormData();
            formData.append('action', action);

            if (action === 'start') {
                const totalTime = prompt('请输入倒计时总时长（秒）:');
                formData.append('total_time', totalTime);
            }

            fetch('control.php', {
                method: 'POST',
                body: formData
            }).then(() => {
                // 操作完成后更新倒计时状态
                updateCountdown();
            });
        }

        function updateCountdown() {
            fetch('get_status.php')
                .then(response => response.json())
                .then(data => {
                    const remainingTime = data.remaining_time;
                    const minutes = Math.floor(remainingTime / 60);
                    const seconds = remainingTime % 60;
                    document.getElementById('countdown').innerText = `${minutes} 分 ${seconds} 秒`;

                    if (remainingTime > 0 && data.status === 'running') {
                        setTimeout(updateCountdown, 1000);
                    }
                });
        }

        // 页面加载时启动
        window.onload = updateCountdown;
    </script>
</head>
<body>
    <h1>倒计时控制</h1>
    <div id="countdown">加载中...</div>
    <button onclick="control('start')">开始</button>
    <button onclick="control('pause')">暂停</button>
    <button onclick="control('continue')">继续</button>
    <button onclick="control('stop')">停止</button>
</body>
</html>

    总结

    这个倒计时功能通过PHP和JavaScript来实现。其中，PHP负责处理倒计时的逻辑和状态管理，前端通过JavaScript定期从服务器获取状态并动态更新页面。这样即使刷新页面，倒计时的状态也能保持不变。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(17条)

报告相同问题？

问题事件

  • 系统已结题 9月20日
  • 已采纳回答 9月12日
  • 创建了问题 9月11日

悬赏问题

  • ¥50 comsol温度场仿真无法模拟微米级激光光斑
  • ¥15 上传图片时提交的存储类型
  • ¥15 Ubuntu开机显示器只显示kernel，是没操作系统（相关搜索：显卡驱动）
  • ¥15 VB.NET如何绘制倾斜的椭圆
  • ¥15 在rhel8中安装qemu-kvm时遇到“cannot initialize crypto:unable to initialize gcrypt“报错”
  • ¥15 arbotix没有/cmd_vel话题
  • ¥20 找能定制Python脚本的
  • ¥15 odoo17的分包重新供应路线如何设置？可从销售订单中实时直接触发采购订单或相关单据
  • ¥15 用C语言怎么判断字符串的输入是否符合设定？
  • ¥15 通信专业本科生论文选这两个哪个方向好研究呀