导入
实时比分
学习如何使用实时比分组件，以及我们可以与之配合使用的各种标签的功能。
实时比分组件显示按赛事分组的当前比赛列表。该列表将在 data-refresh 标签中指定的秒数后自动更新，会自动添加新比赛并移除已完成的比赛。
实时比分组件标签
下面我们来看一下实时比分组件的所有标签及其功能。具体如下：
| 标签 | 类型 | 分类 | 说明 |
|---|---|---|---|
| data-host | 字符串 | 必填 | 包含主机名。根据用户的 API 密钥，可以是 v3.football.api-sports.io 或 api-football-v1.p.rapidapi.com。我们将使用 v3.football.api-sports.io 作为 data-host。 |
| data-key | 字符串 | 必填 | 这是 API 密钥。 |
| data-refresh | 整数 | 可选 | 对应于列表更新前等待的秒数。必须是大于 15 的整数。如果设置为 0 或留空，则数据不会自动更新。 |
| data-theme | 字符串 | 可选 | 用于指定希望使用的主题颜色。若此字段为空，则应用默认主题；否则可选值为 grey 或 dark。 |
| data-show-errors | 字符串 | 可选 | 用于控制是否显示错误信息，取值为 true 或 false。 |
查看实时比分
让我们通过实时组件来更直观地了解其工作方式。以下是实时比分组件的 HTML 脚本：
No configuration found for ID: a6b40282fe20df73f182815ca9e131c2028e221ca68f5ec0b170d6ab8e1aca98
- 第 1 行 包含
id标签。该id将决定使用四个组件中的哪一个。 - 第 2 行至第 6 行 包含与该组件相关的标签，已在上表中讨论过。
- 第 7 行 包含类名。所有组件的类名相同。
- 第 9 行至第 12 行 包含
script标签。它用于加载 API-Football 组件的 JavaScript。如果在同一页面集成多个组件，只需引入一次脚本标签。
点击“运行”按钮以查看实时比分组件的输出结果。
我们可以在 第 3 行 修改 data-refresh 标签的值来调整刷新频率。将 data-theme 标签设置为 grey 或 dark 可改变输出界面的外观。
如果组件未显示所需信息，请在 第 6 行 将 data-show-errors 标签设为 true，以便在组件中显示错误信息。可能出现的错误包括：
- 已达到每日请求上限。
- 标签填写不正确。
- API 密钥错误。