1. 前端页面: 用户看到和交互的界面,使用HTML和CSS来美化。
  2. 后端逻辑: 使用PHP来处理核心功能,如生成随机开奖号码、记录历史开奖记录。
  3. 数据存储: 使用一个简单的文本文件来存储历史开奖记录,这样无需配置数据库,非常适合个人学习或小型项目。

第一步:准备工作

在你的Web服务器(如Apache、Nginx)根目录下,创建一个文件夹,pc28,然后在这个文件夹里创建以下三个文件:

php制作pc28开奖网页
(图片来源网络,侵删)
  • index.php (主页面)
  • style.css (样式文件)
  • history.txt (历史记录文件,这个文件我们先不创建,PHP会自动创建它)

第二步:编写前端页面 (index.php)

这个文件将包含显示开奖结果、历史记录的表单和基本布局。

<?php
// 引入样式文件
echo '<link rel="stylesheet" href="style.css">';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">PC28 开奖系统</title>
</head>
<body>
    <div class="container">
        <h1>PC28 开奖系统</h1>
        <!-- 开奖结果展示区 -->
        <div class="result-box">
            <h2>当前开奖号码</h2>
            <div class="number-display" id="number-display">
                <!-- 号码将通过PHP在这里显示 -->
                <?php
                // 读取并显示最新的开奖号码
                $history_file = 'history.txt';
                if (file_exists($history_file)) {
                    $lines = file($history_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
                    if (!empty($lines)) {
                        $last_draw = end($lines);
                        // 解析最后一行,格式: 时间|号码|大小|单双
                        $data = explode('|', $last_draw);
                        if (count($data) === 4) {
                            echo '<span class="number">' . htmlspecialchars($data[1]) . '</span>';
                            echo '<p>大小: <span class="size">' . htmlspecialchars($data[2]) . '</span></p>';
                            echo '<p>单双: <span class="parity">' . htmlspecialchars($data[3]) . '</span></p>';
                        }
                    } else {
                        echo '<p>暂无开奖记录</p>';
                    }
                } else {
                    echo '<p>暂无开奖记录</p>';
                }
                ?>
            </div>
        </div>
        <!-- 开奖按钮 -->
        <div class="action-box">
            <form action="" method="POST">
                <button type="submit" name="draw" class="draw-button">立即开奖</button>
            </form>
        </div>
        <!-- 历史记录区 -->
        <div class="history-box">
            <h2>历史开奖记录</h2>
            <div class="history-list">
                <?php
                // 读取并显示历史记录
                $history_file = 'history.txt';
                if (file_exists($history_file)) {
                    $lines = file($history_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
                    // 反向显示,最新的在前面
                    $lines = array_reverse($lines);
                    if (!empty($lines)) {
                        echo '<table>';
                        echo '<tr><th>期号</th><th>开奖时间</th><th>号码</th><th>大小</th><th>单双</th></tr>';
                        $period = 1; // 期号
                        foreach ($lines as $line) {
                            $data = explode('|', $line);
                            if (count($data) === 4) {
                                echo '<tr>';
                                echo '<td>' . $period++ . '</td>';
                                echo '<td>' . htmlspecialchars($data[0]) . '</td>';
                                echo '<td>' . htmlspecialchars($data[1]) . '</td>';
                                echo '<td>' . htmlspecialchars($data[2]) . '</td>';
                                echo '<td>' . htmlspecialchars($data[3]) . '</td>';
                                echo '</tr>';
                            }
                        }
                        echo '</table>';
                    } else {
                        echo '<p>暂无历史记录</p>';
                    }
                } else {
                    echo '<p>暂无历史记录</p>';
                }
                ?>
            </div>
        </div>
    </div>
</body>
</html>

第三步:编写后端逻辑 (PHP代码嵌入 index.php)

我们需要在 index.php 的顶部添加PHP逻辑,用于处理“立即开奖”的请求,并生成新的开奖号码,我们将把这些代码放在 <?php ... ?> 标签中,放在文件的最上方。

将以下代码添加到 index.php<head> 标签之前:

<?php
// 处理开奖请求
if (isset($_POST['draw'])) {
    // 1. 生成随机号码 (1-99)
    $number = mt_rand(1, 99);
    // 2. 判断大小
    // PC28规则: 1-49为小 (Small), 50-99为大 (Big)
    $size = ($number >= 50) ? '大' : '小';
    // 3. 判断单双
    $parity = ($number % 2 == 0) ? '双' : '单';
    // 4. 获取当前时间
    $draw_time = date('Y-m-d H:i:s');
    // 5. 准备要写入的数据,格式: 时间|号码|大小|单双
    $data_to_write = $draw_time . '|' . $number . '|' . $size . '|' . $parity . PHP_EOL;
    // 6. 将数据追加到历史记录文件
    // FILE_APPEND 表示追加写入,而不是覆盖
    // LOCK_EX 表示在写入时锁定文件,防止并发问题
    file_put_contents('history.txt', $data_to_write, FILE_APPEND | LOCK_EX);
    // 7. 开奖后,重定向回当前页面,以防止刷新页面时重复提交表单
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit; // 确保在重定向后脚本停止执行
}
?>

代码解释:

php制作pc28开奖网页
(图片来源网络,侵删)
  • isset($_POST['draw']): 检查是否点击了“立即开奖”按钮。
  • mt_rand(1, 99): 使用更安全的 mt_rand 函数生成1到99的随机整数。
  • date('Y-m-d H:i:s'): 获取当前的年月日时分秒。
  • file_put_contents(...): 这是PHP中写入文件的便捷函数。
    • 'history.txt': 要写入的文件名。
    • $data_to_write: 要写入的内容。
    • FILE_APPEND: 关键参数,表示如果文件存在,就在末尾追加内容,而不是覆盖。
    • LOCK_EX: 文件锁定,这在多用户同时访问时很重要,可以防止数据错乱。
  • header('Location: ...'): 页面重定向,这是一个非常重要的实践,可以避免用户刷新页面导致重复提交(F5问题)。

第四步:美化页面 (style.css)

为了让网页看起来更专业、更美观,我们创建一个CSS文件。

style.css 文件中写入以下内容:

/* 全局样式 */
body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}
.container {
    width: 90%;
    max-width: 800px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1, h2 {
    color: #1a1a1a;
    text-align: center;
}
h1 {
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
/* 开奖结果样式 */
.result-box {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 8px;
}
.number-display {
    margin-top: 20px;
}
.number-display .number {
    font-size: 72px;
    font-weight: bold;
    color: #e74c3c;
    display: block;
    margin: 10px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.number-display .size, .number-display .parity {
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
}
/* 按钮样式 */
.action-box {
    text-align: center;
    margin-bottom: 30px;
}
.draw-button {
    padding: 15px 40px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #2ecc71;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.draw-button:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.draw-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 历史记录样式 */
.history-box {
    margin-top: 30px;
}
.history-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.history-list table {
    width: 100%;
    border-collapse: collapse;
}
.history-list th, .history-list td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.history-list th {
    background-color: #f8f9fa;
    font-weight: bold;
    position: sticky;
    top: 0;
}
.history-list tr:nth-child(even) {
    background-color: #f9f9f9;
}
.history-list tr:hover {
    background-color: #f1f1f1;
}

最终效果和如何运行

  1. 文件结构:

    /var/www/html/pc28/  (或其他你的Web服务器根目录)
    ├── index.php
    ├── style.css
    └── history.txt (第一次运行后会自动生成)
  2. 运行:

    • 确保你的Web服务器(如XAMPP, WAMP, MAMP)已经启动。
    • 在浏览器中访问 http://localhost/pc28/
    • 你将看到一个干净的开奖界面。
    • 点击“立即开奖”按钮,页面会刷新,并在顶部显示新的开奖号码,同时在下方的历史记录表格中增加一条记录。

功能扩展建议

这个基础版本已经可以正常工作,如果你想让功能更强大,可以考虑以下扩展:

  1. 数据持久化: 使用MySQL或SQLite数据库代替 history.txt 文件,查询和管理会更高效、更安全。
  2. 管理员后台: 创建一个需要登录的后台,可以手动修改开奖结果、清空历史记录等。
  3. 用户投注功能: 添加用户系统,允许用户对“大”、“小”、“单”、“双”进行投注,并记录下注信息。
  4. 定时开奖: 使用 cron job (Linux) 或任务计划程序 (Windows) 设置一个定时任务,让系统在固定时间自动开奖。
  5. 动画效果: 使用JavaScript和CSS3为开奖号码的生成过程添加滚动的动画效果,使其更生动。