IT技术社区_专业开发者平台_最新编程教程与解决方案 -沐辰社区

这个php项目显示被射门次数对比？

wen PHP项目 2

本文目录导读：

这个php项目显示被射门次数对比？

  1. 简单数组方式
  2. 使用Chart.js图表库
  3. 从数据库获取数据
  4. 添加更多详情和样式
  5. 完整代码示例（包含所有功能）
  6. 关键特性说明：

我理解您想了解如何在一个PHP项目中显示足球比赛的射门次数对比,以下是几种实现方式：

简单数组方式

<?php
// 数据准备
$matchData = [
    'home_team' => '曼联',
    'away_team' => '利物浦',
    'home_shots' => 12,
    'away_shots' => 8,
    'home_shots_on_target' => 5,
    'away_shots_on_target' => 3,
    'home_possession' => 55,
    'away_possession' => 45
];
?>
<!DOCTYPE html>
<html>
<head>射门次数对比</title>
    <style>
        .shot-comparison { padding: 20px; }
        .team-row { display: flex; align-items: center; margin: 10px 0; }
        .team-name { width: 150px; font-weight: bold; }
        .shot-bar { display: flex; align-items: center; }
        .bar { height: 30px; background: #4CAF50; transition: width 0.5s; }
        .bar-away { background: #f44336; }
        .shot-count { margin-left: 10px; font-weight: bold; }
        .possession-bar { height: 20px; background: #2196F3; }
    </style>
</head>
<body>
    <div class="shot-comparison">
        <h2>射门次数对比</h2>
        <!-- 射门次数条图 -->
        <div class="team-row">
            <span class="team-name"><?php echo $matchData['home_team']; ?></span>
            <div class="shot-bar">
                <div class="bar" style="width: <?php echo $matchData['home_shots'] * 10; ?>px;"></div>
                <span class="shot-count"><?php echo $matchData['home_shots']; ?></span>
            </div>
        </div>
        <div class="team-row">
            <span class="team-name"><?php echo $matchData['away_team']; ?></span>
            <div class="shot-bar">
                <div class="bar bar-away" style="width: <?php echo $matchData['away_shots'] * 10; ?>px;"></div>
                <span class="shot-count"><?php echo $matchData['away_shots']; ?></span>
            </div>
        </div>
        <!-- 射正次数 -->
        <h3>射正次数</h3>
        <p>主场：<strong><?php echo $matchData['home_shots_on_target']; ?></strong> | 客场：<strong><?php echo $matchData['away_shots_on_target']; ?></strong></p>
        <!-- 控球率对比 -->
        <h3>控球率</h3>
        <div style="width: 100%; background: #ddd;">
            <div style="width: <?php echo $matchData['home_possession']; ?>%; background: #4CAF50; padding: 5px;">
                <?php echo $matchData['home_possession']; ?>%
            </div>
        </div>
    </div>
</body>
</html>

使用Chart.js图表库

<!DOCTYPE html>
<html>
<head>射门统计对比</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="shotChart" width="400" height="200"></canvas>
    <?php
    // PHP端数据
    $stats = [
        'labels' => ['射门', '射正', '控球率(%)'],
        'home' => [12, 5, 55],
        'away' => [8, 3, 45]
    ];
    ?>
    <script>
        const ctx = document.getElementById('shotChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($stats['labels']); ?>,
                datasets: [
                    {
                        label: '主场',
                        data: <?php echo json_encode($stats['home']); ?>,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '客场',
                        data: <?php echo json_encode($stats['away']); ?>,
                        backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 20
                    }
                }
            }
        });
    </script>
</body>
</html>

从数据库获取数据

<?php
// 数据库连接
$pdo = new PDO('mysql:host=localhost;dbname=football_stats', 'username', 'password');
// 查询比赛数据
$query = "SELECT 
    match_id,
    home_team,
    away_team,
    home_shots,
    away_shots,
    home_shots_on_target,
    away_shots_on_target
    FROM matches 
    WHERE match_id = :match_id";
$stmt = $pdo->prepare($query);
$stmt->execute(['match_id' => 1]);
$match = $stmt->fetch(PDO::FETCH_ASSOC);
// 获取球队名称
$query_teams = "SELECT team_name FROM teams WHERE team_id IN (:home_id, :away_id)";
// ... 实现具体查询
?>
<div class="shot-comparison">
    <h2><?php echo $match['home_team']; ?> vs <?php echo $match['away_team']; ?></h2>
    <div class="shots-container">
        <div class="team home">
            <h3><?php echo $match['home_team']; ?></h3>
            <div class="shot-stats">
                <p>射门：<span class="count"><?php echo $match['home_shots']; ?></span></p>
                <p>射正：<span class="count"><?php echo $match['home_shots_on_target']; ?></span></p>
                <p>得分率：<span class="percentage">
                    <?php echo $match['home_shots'] > 0 ? 
                        round(($match['home_shots_on_target'] / $match['home_shots']) * 100) . '%' : '0%'; ?>
                </span></p>
            </div>
        </div>
        <div class="vs-label">VS</div>
        <div class="team away">
            <h3><?php echo $match['away_team']; ?></h3>
            <div class="shot-stats">
                <p>射门：<span class="count"><?php echo $match['away_shots']; ?></span></p>
                <p>射正：<span class="count"><?php echo $match['away_shots_on_target']; ?></span></p>
                <p>得分率：<span class="percentage">
                    <?php echo $match['away_shots'] > 0 ? 
                        round(($match['away_shots_on_target'] / $match['away_shots']) * 100) . '%' : '0%'; ?>
                </span></p>
            </div>
        </div>
    </div>
</div>

添加更多详情和样式

<!DOCTYPE html>
<html>
<head>
    <style>
        .match-stats {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        .team-card {
            flex: 1;
            padding: 15px;
            text-align: center;
        }
        .stat-item {
            margin: 15px 0;
        }
        .stat-label {
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
        }
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }
        .center-vs {
            display: flex;
            align-items: center;
            font-size: 32px;
            font-weight: bold;
            color: #999;
            padding: 0 20px;
        }
        .comparison-bar {
            height: 30px;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 4px;
            animation: growBar 1s ease-out;
        }
        @keyframes growBar {
            from { width: 0; }
        }
    </style>
</head>
<body>
    <!-- 完整显示区域 -->
    <div class="match-stats">
        <div class="team-card home">
            <h3>主场</h3>
            <div class="stat-item">
                <div class="stat-label">射门</div>
                <div class="stat-value">12</div>
                <div class="comparison-bar" style="width: 60%;"></div>
            </div>
            <div class="stat-item">
                <div class="stat-label">射正</div>
                <div class="stat-value">5</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">控球率</div>
                <div class="stat-value">55%</div>
            </div>
        </div>
        <div class="center-vs">VS</div>
        <div class="team-card away">
            <h3>客场</h3>
            <div class="stat-item">
                <div class="stat-label">射门</div>
                <div class="stat-value">8</div>
                <div class="comparison-bar" style="width: 40%;"></div>
            </div>
            <div class="stat-item">
                <div class="stat-label">射正</div>
                <div class="stat-value">3</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">控球率</div>
                <div class="stat-value">45%</div>
            </div>
        </div>
    </div>
</body>
</html>

完整代码示例（包含所有功能）

<?php
// 模拟数据源
$match_stats = [
    'home' => [
        'team_name' => '皇家马德里',
        'shots' => 15,
        'shots_on_target' => 7,
        'possession' => 52,
        'corners' => 8,
        'fouls' => 12
    ],
    'away' => [
        'team_name' => '巴塞罗那',
        'shots' => 18,
        'shots_on_target' => 9,
        'possession' => 48,
        'corners' => 11,
        'fouls' => 9
    ]
];
// 计算最大射门数用于比例
$max_shots = max($match_stats['home']['shots'], $match_stats['away']['shots']);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">足球比赛射门统计对比</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .match-header {
            text-align: center;
            margin-bottom: 25px;
        }
        .score-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }
        .team-score {
            font-size: 48px;
            font-weight: bold;
            margin: 0 20px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .score-divider {
            font-size: 36px;
            font-weight: bold;
            color: #999;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
        }
        .stat-name {
            color: #666;
            font-weight: 500;
            min-width: 120px;
        }
        .stat-value {
            font-weight: bold;
            min-width: 30px;
            text-align: center;
        }
        .bar-container {
            flex: 1;
            margin: 0 15px;
            height: 30px;
            background: #e0e0e0;
            border-radius: 15px;
            overflow: hidden;
        }
        .bar-fill {
            height: 100%;
            border-radius: 15px;
            background: linear-gradient(90deg, #2196F3, #64B5F6);
            transition: width 0.5s ease;
            position: relative;
        }
        .bar-fill.away {
            background: linear-gradient(90deg, #f44336, #ff7043);
        }
        .stat-highlight {
            color: #2196F3;
        }
        .possession-bar {
            height: 20px;
            display: flex;
            border-radius: 10px;
            overflow: hidden;
            background: #e0e0e0;
        }
        .possession-home {
            background: #2196F3;
            height: 100%;
            text-align: center;
            color: white;
            line-height: 20px;
        }
        .possession-away {
            background: #f44336;
            height: 100%;
            text-align: center;
            color: white;
            line-height: 20px;
        }
        .team-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .team-name {
            font-weight: bold;
            font-size: 18px;
        }
        .badge {
            display: inline-block;
            padding: 2px 8px;
            background: #f0f0f0;
            border-radius: 4px;
            font-size: 12px;
            color: #666;
        }
        .legend {
            display: flex;
            gap: 20px;
            margin-top: 15px;
            justify-content: center;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .legend-color {
            width: 20px;
            height: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="match-header">
        <h1>比赛统计对比</h1>
        <div class="score-container">
            <div class="team-score">
                <span><?php echo $match_stats['home']['team_name']; ?></span>
                <div><?php echo $match_stats['home']['shots_on_target']; ?></div>
            </div>
            <div class="score-divider">:</div>
            <div class="score-divider">对手</div>
            <div class="score-divider">:</div>
            <div class="team-score">
                <span><?php echo $match_stats['away']['team_name']; ?></span>
                <div><?php echo $match_stats['away']['shots_on_target']; ?></div>
            </div>
        </div>
    </div>
    <div class="stat-card">
        <h2>核心数据对比</h2>
        <!-- 射门次数 -->
        <div class="team-header">
            <span class="team-name"><?php echo $match_stats['home']['team_name']; ?></span>
            <span class="team-name"><?php echo $match_stats['away']['team_name']; ?></span>
        </div>
        <div class="stat-row">
            <span class="stat-value"><?php echo $match_stats['home']['shots']; ?></span>
            <span class="stat-name">射门次数</span>
            <span class="stat-value"><?php echo $match_stats['away']['shots']; ?></span>
        </div>
        <div class="stat-row">
            <div class="bar-container">
                <div class="bar-fill" style="width: <?php echo ($match_stats['home']['shots'] / $max_shots) * 100; ?>%;"></div>
            </div>
        </div>
        <!-- 射正次数 -->
        <div class="stat-row" style="margin-top: 20px;">
            <span class="stat-value"><?php echo $match_stats['home']['shots_on_target']; ?></span>
            <span class="stat-name">射正次数</span>
            <span class="stat-value"><?php echo $match_stats['away']['shots_on_target']; ?></span>
        </div>
        <div class="stat-row">
            <div class="bar-container">
                <div class="bar-fill" style="width: <?php echo ($match_stats['home']['shots_on_target'] / max($match_stats['home']['shots_on_target'], $match_stats['away']['shots_on_target'])) * 100; ?>%;"></div>
            </div>
        </div>
        <!-- 角球 -->
        <div class="stat-row" style="margin-top: 20px;">
            <span class="stat-value"><?php echo $match_stats['home']['corners']; ?></span>
            <span class="stat-name">角球</span>
            <span class="stat-value"><?php echo $match_stats['away']['corners']; ?></span>
        </div>
        <div class="stat-row">
            <div class="bar-container">
                <div class="bar-fill" style="width: <?php echo ($match_stats['home']['corners'] / max($match_stats['home']['corners'], $match_stats['away']['corners'])) * 100; ?>%;"></div>
            </div>
        </div>
        <!-- 犯规 -->
        <div class="stat-row" style="margin-top: 20px;">
            <span class="stat-value"><?php echo $match_stats['home']['fouls']; ?></span>
            <span class="stat-name">犯规</span>
            <span class="stat-value"><?php echo $match_stats['away']['fouls']; ?></span>
        </div>
        <!-- 控球率 -->
        <div class="stat-row" style="margin-top: 20px;">
            <span class="stat-value"><?php echo $match_stats['home']['possession']; ?>%</span>
            <span class="stat-name">控球率</span>
            <span class="stat-value"><?php echo $match_stats['away']['possession']; ?>%</span>
        </div>
        <div class="possession-bar">
            <div class="possession-home" style="width: <?php echo $match_stats['home']['possession']; ?>%;">
                <?php echo $match_stats['home']['possession']; ?>%
            </div>
            <div class="possession-away" style="width: <?php echo $match_stats['away']['possession']; ?>%;">
                <?php echo $match_stats['away']['possession']; ?>%
            </div>
        </div>
    </div>
    <div class="legend">
        <div class="legend-item">
            <div class="legend-color" style="background: #2196F3;"></div>
            <span><?php echo $match_stats['home']['team_name']; ?></span>
        </div>
        <div class="legend-item">
            <div class="legend-color" style="background: #f44336;"></div>
            <span><?php echo $match_stats['away']['team_name']; ?></span>
        </div>
    </div>
</body>
</html>

关键特性说明：

  1. 数据灵活性：可以从数组、数据库或API获取数据
  2. 响应式设计：适配不同屏幕大小
  3. 动画效果：条形图有过渡动画
  4. 可访问性：清晰的标签和颜色对比

您可以根据需要选择适合的实现方式，调整数据结构或样式，如果需要更多定制或有其他问题,请告诉我！

上一篇根据php项目，进攻三区传球成功率？

下一篇php项目统计地面对抗谁胜出？

相关文章

抱歉，评论功能暂时关闭!