- 前端页面: 用户看到和交互的界面,使用HTML和CSS来美化。
- 后端逻辑: 使用PHP来处理核心功能,如生成随机开奖号码、记录历史开奖记录。
- 数据存储: 使用一个简单的文本文件来存储历史开奖记录,这样无需配置数据库,非常适合个人学习或小型项目。
第一步:准备工作
在你的Web服务器(如Apache、Nginx)根目录下,创建一个文件夹,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; // 确保在重定向后脚本停止执行
}
?>
代码解释:

(图片来源网络,侵删)
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;
}
最终效果和如何运行
-
文件结构:
/var/www/html/pc28/ (或其他你的Web服务器根目录) ├── index.php ├── style.css └── history.txt (第一次运行后会自动生成) -
运行:
- 确保你的Web服务器(如XAMPP, WAMP, MAMP)已经启动。
- 在浏览器中访问
http://localhost/pc28/。 - 你将看到一个干净的开奖界面。
- 点击“立即开奖”按钮,页面会刷新,并在顶部显示新的开奖号码,同时在下方的历史记录表格中增加一条记录。
功能扩展建议
这个基础版本已经可以正常工作,如果你想让功能更强大,可以考虑以下扩展:
- 数据持久化: 使用MySQL或SQLite数据库代替
history.txt文件,查询和管理会更高效、更安全。 - 管理员后台: 创建一个需要登录的后台,可以手动修改开奖结果、清空历史记录等。
- 用户投注功能: 添加用户系统,允许用户对“大”、“小”、“单”、“双”进行投注,并记录下注信息。
- 定时开奖: 使用
cron job(Linux) 或任务计划程序 (Windows) 设置一个定时任务,让系统在固定时间自动开奖。 - 动画效果: 使用JavaScript和CSS3为开奖号码的生成过程添加滚动的动画效果,使其更生动。
