如何实现网站Prediction预测表从LiveScore自动更新数据

完整HTML代码（内嵌CSS+自动更新JS逻辑） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>赛事预测表</title>
  <style>
    table,
    th,
    td {
      border: 0 solid black;
      border-collapse: collapse;
    }

    table {
      width: 90%;
      margin: 20px auto;
    }

    th {
      color: white;
      background-color: black;
      padding: 10px;
    }

    th,
    td {
      font-size: 25pt;
      font-family: Arial;
      text-align: center;
      padding: 8px;
    }

    .score {
      color: red;
      font-weight: bold;
      margin: 0 10px;
    }

    .prediction-correct {
      background-color: #d4edda;
      color: #155724;
      font-weight: bold;
    }

    .prediction-wrong {
      background-color: #f8d7da;
      color: #721c24;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table id="predictionTable">
    <tr>
      <th colspan="2"><b>英格兰 » 超级联赛</b></th>
      <th><b>预测结果</b></th>
    </tr>
    <!-- 比赛数据会通过JS自动填充 -->
  </table>

  <script>
    // 页面加载完成后立即拉取一次数据，之后每30秒更新一次
    window.onload = () => {
      fetchAndRenderData()
      setInterval(fetchAndRenderData, 30000) // 30000毫秒=30秒，可自行修改更新频率
    }

    // 拉取并渲染数据
    async function fetchAndRenderData() {
      const tableBody = document.getElementById('predictionTable')
      // 先清空原有比赛数据（保留表头）
      while(tableBody.children.length > 1) {
        tableBody.removeChild(tableBody.lastChild)
      }

      // ------------ 此处替换为你自己的数据源请求逻辑 ------------
      const latestMatchList = await fetchLatestMatchData()
      // --------------------------------------------------------

      // 渲染每一场比赛到表格
      latestMatchList.forEach(match => {
        const row = document.createElement('tr')
        
        // 比赛时间列
        const timeTd = document.createElement('td')
        timeTd.textContent = match.matchTime
        row.appendChild(timeTd)

        // 对阵+比分列
        const matchTd = document.createElement('td')
        matchTd.innerHTML = `${match.homeTeam} <span class="score">${match.homeScore} : ${match.awayScore}</span> ${match.awayTeam}`
        row.appendChild(matchTd)

        // 预测结果列
        const predictionTd = document.createElement('td')
        predictionTd.textContent = match.prediction
        // 比赛结束后标记预测是否正确
        if (match.isFinished) {
          predictionTd.className = match.predictionCorrect ? 'prediction-correct' : 'prediction-wrong'
        }
        row.appendChild(predictionTd)

        tableBody.appendChild(row)
      })
    }

    // 模拟拉取最新赛事数据的函数，实际使用时替换为你的后台接口请求
    async function fetchLatestMatchData() {
      // 返回格式可根据自己的数据源调整，对应修改上方渲染逻辑即可
      return [
        {
          matchTime: '24-06 20:16',
          homeTeam: '红牛布拉干蒂诺',
          awayTeam: '庞特普雷塔',
          homeScore: 2,
          awayScore: 1,
          prediction: '主胜',
          isFinished: true,
          predictionCorrect: true
        },
        {
          matchTime: '24-06 22:30',
          homeTeam: '阿森纳',
          awayTeam: '曼联',
          homeScore: 1,
          awayScore: 0,
          prediction: '主胜',
          isFinished: false,
          predictionCorrect: null
        }
      ]
    }
  </script>
</body>
</html>

代码说明 #

• 修复了原有代码的语法错误：包括HTML中重复的td标签、CSS中未补全的宽度属性和背景色属性
• 默认每30秒自动刷新一次赛事数据，可修改setInterval的第二个参数调整更新频率（单位为毫秒）
• fetchLatestMatchData为数据拉取入口，实际使用时替换为你自己的内部数据源请求即可
• 新增了预测结果命中/未命中的样式标记，比赛结束后会自动高亮对应结果，可根据需求自行调整样式规则

内容的提问来源于stack exchange，提问作者Winzbets CEO