活动卡片（实时倒计时 + 报名按钮状态 CSS 源码）

效果演示（真实可交互）

下方为活动卡片：左上角渐变日期徽章展示”09月09日”，正文包含活动标签与简介，中部为天/时/分/秒四段倒计时，每秒刷新；点击”立即报名”按钮会变为绿色”✓ 报名成功”状态，报名人数同步 +1。

完整代码

HTML 结构：卡片包含日期徽章、标题与时间地点、标签行、活动描述、倒计时区块与报名操作区：

<div class="ev-card">
  <div class="ev-head">
    <div class="ev-date"><b>09</b><span>09月</span></div>
    <div class="ev-title-box">
      <h3>粤喵前端组件大会 2026</h3>
      <p>📅 2026-09-09 14:00 · 📍 广州琶洲会展中心</p>
    </div>
  </div>
  <div class="ev-count">
    <div class="ev-unit"><b>0</b><span>天</span></div>
    <span class="ev-colon">:</span>
    <div class="ev-unit"><b>0</b><span>时</span></div>
    <!-- 分 / 秒 同理 -->
  </div>
  <button class="ev-btn">立即报名</button>
  <span>已有 1,286 人报名</span>
</div>

核心 CSS：倒计时数字使用渐变文字 + 等宽数字（tabular-nums）防止每秒跳动时宽度抖动；报名成功态切换为绿色：

.ev-num {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #9db4ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ev-btn.done {
  background: linear-gradient(135deg, #43e97b, #38f9d7); color: #0d3b2a;
  cursor: default;
}

原生 JS 倒计时与报名逻辑：

const TARGET = new Date('2026-09-09T14:00:00+08:00');
function tick() {
  const diff = Math.max(0, TARGET - Date.now());
  days.textContent = pad(Math.floor(diff / 86400000));
  hours.textContent = pad(Math.floor(diff / 3600000) % 24);
  mins.textContent = pad(Math.floor(diff / 60000) % 60);
  secs.textContent = pad(Math.floor(diff / 1000) % 60);
}
tick();
setInterval(tick, 1000);

regBtn.addEventListener('click', () => {
  if (regBtn.classList.contains('done')) return;
  regBtn.classList.add('done');
  regBtn.textContent = '✓ 报名成功';
  joined.textContent = '已有 ' + (++count).toLocaleString('en-US') + ' 人报名';
});

参数说明

兼容性与性能

• 倒计时基于 Date.now() 差值计算，不受系统时区影响，跨时区观众看到的时间一致
• setInterval 每秒仅更新 4 个文本节点，开销极小；页面隐藏时可暂停以节省资源
• 渐变文字在不支持 background-clip: text 的浏览器中自动降级为白色数字
• 报名成功态用 class 切换，重复点击有防重复保护

常见问题

Q: 活动结束后倒计时显示什么？ 组件会定格在 0 天 0 时 0 分 0 秒，此时可搭配”活动已结束”文案或跳转回放链接。

Q: 时间从服务器获取怎么处理？ 用接口返回的服务器时间戳计算差值（serverTime - Date.now() 校准），避免用户本地时钟不准导致倒计时偏差。

Q: 报名人数需要防重复点击吗？ 已内置：按钮变为 done 状态后再次点击直接 return；生产环境还应接入后端接口做幂等校验。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换活动信息与目标时间即可上线。