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

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

wen PHP项目 152

本文目录导读：

这个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. 可访问性：清晰的标签和颜色对比

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

版权声明：NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播

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

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

相关文章

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

友情链接攻略窝 · 礼包窝 · 配置窝 · 换算窝 · 算法窝 · 查文窝 · 手册窝 · 问答窝 · 全文搜 · 手册库
相关站点礼包窝 · 查文窝