实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (0)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 近期暂无比赛，请稍后再来查看。 | ||||
更新于 2026-06-21 20:08（北京时间）
立即购买 倒计时
实时追踪距离下一场精彩比赛还有多少秒、分钟、小时和天。
西瓜体育组件
倒计时至目标日期：
data-countdown='MM/DD/YYYY HH:mm:ss AM/PM' 即刻掌握：
data-countdown='07/01/2023 07:00:00 PM' 西瓜体育专注高清直播，身临其境，为用户提供专业可靠的体验。
0d
0h
0m
0s
0d
0h
0m
0s
0d
0h
0m
0s
<!-- Left aligned countdown (default) -->
<div class="countdown h4" data-countdown="07/01/2023 07:00:00 PM">
<div class="countdown-days">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">d</span>
</div>
<div class="countdown-hours">
<span class="countdown-value"></span>
<span class="countdown-label text-muted">h</span>
</div>
<div class="countdown-minutes">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">m</span>
</div>
<div class="countdown-seconds">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">s</span>
</div>
</div>
<!-- Center aligned countdown -->
<div class="countdown h4 justify-content-center" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<!-- Right aligned countdown -->
<div class="countdown h4 justify-content-end" data-countdown="07/01/2023 07:00:00 PM">
...
</div>// Left aligned countdown (default)
.countdown.h4(data-countdown="07/01/2023 07:00:00 PM")
.countdown-days
span.countdown-value 0
span.countdown-label.text-muted d
.countdown-hours
span.countdown-value 0
span.countdown-label.text-muted h
.countdown-minutes
span.countdown-value 0
span.countdown-label.text-muted m
.countdown-seconds
span.countdown-value 0
span.countdown-label.text-muted s
// Center aligned countdown
.countdown.h4.justify-content-center(data-countdown="07/01/2023 07:00:00 PM")
...
// Right aligned countdown
.countdown.h4.justify-content-end(data-countdown="07/01/2023 07:00:00 PM")
...
Sizing
0d
0h
0m
0s
0d
0h
0m
0s
0d
0h
0m
0s
0d
0h
0m
0s
0d
0h
0m
0s
0d
0h
0m
0s
<!-- Alter countdown sizing using h1-h6, display1-display4 classes -->
<div class="countdown h1" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<div class="countdown h2" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<div class="countdown h3" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<div class="countdown h4" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<div class="countdown h5" data-countdown="07/01/2023 07:00:00 PM">
...
</div>
<div class="countdown h6" data-countdown="07/01/2023 07:00:00 PM">
...
</div>// Alter countdown sizing using h1-h6, display1-display4 classes
.countdown.h1(data-countdown="07/01/2023 07:00:00 PM")
...
.countdown.h2(data-countdown="07/01/2023 07:00:00 PM")
...
.countdown.h3(data-countdown="07/01/2023 07:00:00 PM")
...
.countdown.h4(data-countdown="07/01/2023 07:00:00 PM")
...
.countdown.h5(data-countdown="07/01/2023 07:00:00 PM")
...
.countdown.h6(data-countdown="07/01/2023 07:00:00 PM")
...
Colors
0d
0h
0m
0s
0d
0h
0m
0s
<!-- Multicolor -->
<div class="countdown h4" data-countdown="07/01/2023 07:00:00 PM">
<div class="countdown-days text-accent">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">d</span>
</div>
<div class="countdown-hours text-warning">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">h</span>
</div>
<div class="countdown-minutes text-success">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">m</span>
</div>
<div class="countdown-seconds text-danger">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">s</span>
</div>
</div>
<!-- Light version (white text on dark background) -->
<div class="countdown h4 text-light" data-countdown="07/01/2023 07:00:00 PM">
<div class="countdown-days">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">d</span>
</div>
<div class="countdown-hours">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">h</span>
</div>
<div class="countdown-minutes">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">m</span>
</div>
<div class="countdown-seconds">
<span class="countdown-value">0</span>
<span class="countdown-label opacity-60">s</span>
</div>
</div>// Multicolor
.countdown.h4(data-countdown="07/01/2023 07:00:00 PM")
.countdown-days.text-accent
span.countdown-value 0
span.countdown-label.opacity-60 d
.countdown-hours.text-warning
span.countdown-value 0
span.countdown-label.opacity-60 h
.countdown-minutes.text-success
span.countdown-value 0
span.countdown-label.opacity-60 m
.countdown-seconds.text-danger
span.countdown-value 0
span.countdown-label.opacity-60 s
// Light version (white text on dark background)
.countdown.h4.text-light(data-countdown="07/01/2023 07:00:00 PM")
.countdown-days
span.countdown-value 0
span.countdown-label.opacity-60 d
.countdown-hours
span.countdown-value 0
span.countdown-label.opacity-60 h
.countdown-minutes
span.countdown-value 0
span.countdown-label.opacity-60 m
.countdown-seconds
span.countdown-value 0
span.countdown-label.opacity-60 s
围绕实时资讯，掌握全局，西瓜体育持续打磨更优质的服务。
0d
0h
0m
0s
0d
0h
0m
0s
<!-- Border version -->
<div class="countdown h5" data-countdown="07/01/2023 07:00:00 PM">
<div class="countdown-days border rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">d</span>
</div>
<div class="countdown-hours border rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">h</span>
</div>
<div class="countdown-minutes border rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">m</span>
</div>
<div class="countdown-seconds border rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">s</span>
</div>
</div>
<!-- Shadow version -->
<div class="countdown h5" data-countdown="07/01/2023 07:00:00 PM">
<div class="countdown-days shadow rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">d</span>
</div>
<div class="countdown-hours shadow rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">h</span>
</div>
<div class="countdown-minutes shadow rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">m</span>
</div>
<div class="countdown-seconds shadow rounded p-3">
<span class="countdown-value">0</span>
<span class="countdown-label text-muted">s</span>
</div>
</div>// Border version
.countdown.h5(data-countdown="07/01/2023 07:00:00 PM")
.countdown-days.border.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted d
.countdown-hours.border.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted h
.countdown-minutes.border.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted m
.countdown-seconds.border.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted s
// Shadow version
.countdown.h5(data-countdown="07/01/2023 07:00:00 PM")
.countdown-days.shadow.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted d
.countdown-hours.shadow.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted h
.countdown-minutes.shadow.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted m
.countdown-seconds.shadow.rounded.p-3
span.countdown-value 0
span.countdown-label.text-muted s