<style>
body {font-family: Arial, sans-serif;font-size: 14px;}h1 {margin-top: 0;}ul {list-style-type: none;padding: 0;}li {margin-bottom: 10px;}.score-container {display: flex;justify-content: space-between;}.score {font-size: 36px;margin-right: 10px;}.team-name {font-weight: bold;}.timer {color: 666;font-size: 18px;}.events-list {
.matches.forEach(match => {// 创建比赛容器const matchContainer = document.createElement('li');// 创建得分容器const scoreContainer = document.createElement('div');scoreContainer.classList.add('score-container');// 创建比分const homeScore = document.createElement('span');homeScore.classList.add('score');homeScore.textContent = match.home_team.score;const awayScore = document.createElement('span');awayScore.classList.add('score');awayScore.textContent = match.away_team.score;// 创建球队名称const homeTeamName = document.createElement('span');homeTeamName.classList.add('team-name');homeTeamName.textContent = match.home_team.name;const awayTeamName = document.createElement('span');awayTeamName.classList.add('team-name');awayTeamName.textContent = match.away_team.name;// 添加比分和球队名称到得分容器scoreContainer.appendChild(homeScore);scoreContainer.appendChild(awayScore);scoreContainer.appendChild(homeTeamName);scoreContainer.appendChild(awayTeamName);// 创建计时器const timer = document.createElement('span');timer.classList.add('timer');timer.textContent = match.timer;// 添加得分容器和计时器到比赛容器matchContainer.appendChild(scoreContainer);matchContainer.appendChild(timer);// 添加比赛容器到正在进行的比赛列表document.getElementById('live-matches').appendChild(matchContainer);});});// 定期刷新正在进行的比赛数据setInterval(() => {// 获取正在进行的比赛数据fetch('api/live-matches').then(response => response.json()).then(data => {// 遍历比赛数据并更新比分data.matches.forEach(match => {// 查找对应的比赛容器const matchContainer = document.querySelector(`live-matches li[data-match-id="${match.id}"]`);// 更新比分和计时器matchContainer.querySelector('.score-container .score').textContent = match.home_team.score;matchContainer.querySelector('.score-container .score').textContent = match.away_team.score;matchContainer.querySelector('.timer').textContent = match.timer;});});}, 2000);</script>
最近比赛
<script>// 获取最近比赛数据fetch('api/recent-matches').then(response => response.json()).then(data => {// 遍历比赛数据并显示比分data.matches.forEach(match => {// 创建比赛容器const matchContainer = document.createElement('li');// 创建得分容器const scoreContainer = document.createElement('div');scoreContainer.classList.add('score-container');// 创建比分const homeScore = document.createElement('span');homeScore.classList.add('score');homeScore.textContent = match.home_team.score;const awayScore = document.createElement('span');awayScore.classList.add('score');awayScore.textContent = match.away_team.score;// 创建球队名称const homeTeamName = document.createElement('span');homeTeamName.classList.add('team-name');homeTeamName.textContent = match.home_team.name;const awayTeamName = document.createElement('span');awayTeamName.classList.add('team-name');awayTeamName.textContent = match.away_team.name;// 添加比分和球队名称到得分容器scoreContainer.appendChild(homeScore);scoreContainer.appendChild(awayScore);scoreContainer.appendChild(homeTeamName);scoreContainer.appendChild(awayTeamName);// 创建计时器const timer = document.createElement('span');timer.classList.add('timer');timer.textContent = match.timer;// 添加得分容器和计时器到比赛容器matchContainer.appendChild(scoreContainer);matchContainer.appendChild(timer);// 添加比赛容器到最近比赛列表document.getElementById('recent-matches').appendChild(matchContainer);});});</script>
事件记录
<script>// 获取事件记录数据fetch('api/events').then(response => response.json()).then(data => {// 遍历事件记录数据并显示事件data.events.forEach(event => {// 创建事件容器const eventContainer = document.createElement('li');eventContainer.classList.add('event');// 创建事件类型const eventType = document.createElement('span');eventType.classList.add('event-type');eventType.textContent = event.type;// 创建事件时间const eventTime = document.createElement('span');eventTime.classList.add('event-time');eventTime.textContent = event.time;// 根据事件类型添加不同的颜色switch (event.type) {case '进球':eventContainer.classList.add('green');break;case '失球':eventContainer.classList.add('red');break;case '红牌':eventContainer.classList.add('red-card');break;case '黄牌':eventContainer.classList.add('yellow-card');break;}// 添加事件类型和事件时间到事件容器eventContainer.appendChild(eventType);eventContainer.appendChild(eventTime);// 添加事件容器到事件记录列表document.getElementById('events').appendChild(eventContainer);});});</script>
