如何制作类似https://uawar.net/stats网页的正计时日历/时钟组件？

一、先给准话：必须用JS #

静态HTML只能展示固定内容，要让时间、日历实时更新，JS是绕不开的，必须引入。

二、完整实现步骤 #

1. 搭HTML基础结构 #

先写好和原网站结构对应的容器与时间标签：

<div class="div-counter">
  <time id="clock-calendar"></time>
</div>

2. 用CSS做紫色闪烁效果 #

核心是通过CSS动画实现颜色+透明度的交替变化，模拟闪烁效果：

/* 基础样式，匹配原网站紫色基调 */
.div-counter time {
  color: #9a26b6; /* 可用取色器从原网站提取精准色值 */
  font-size: 1.2rem; /* 按需调整字号 */
}

/* 定义闪烁动画：交替切换透明度与颜色深浅 */
@keyframes purple-flicker {
  0% {
    opacity: 1;
    color: #9a26b6;
  }
  100% {
    opacity: 0.4;
    color: #c26ed1;
  }
}

/* 给time标签绑定动画，无限循环交替播放 */
.div-counter time {
  animation: purple-flicker 1s infinite alternate;
}

要是觉得闪烁节奏不合适，把1s改成0.8s或1.2s就能调整快慢，颜色值直接用取色器吸取原网站的紫色会更精准。

3. 用JS实现实时更新 #

写一个函数获取当前时间并格式化，再设置每秒自动刷新：

function updateClockCalendar() {
  const now = new Date();
  // 格式化日期时间，示例输出「2024-05-20 15:42:30」，可按需调整格式
  const formattedDateTime = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  // 将格式化后的时间插入到time标签中
  document.getElementById('clock-calendar').textContent = formattedDateTime;
}

// 页面加载时先更新一次避免空白，之后每秒自动刷新
updateClockCalendar();
setInterval(updateClockCalendar, 1000);

要是想和原网站的日期时间格式完全一致，调整toLocaleString的参数即可，比如是否显示星期、日期时间的分隔符等。

三、额外小提示 #

• 若想给日期和时间分别设置样式，直接把它们拆成两个标签（如<span class="date"></span>和<span class="time"></span>），单独设置样式和更新逻辑就行。
• 动画的闪烁强度可通过调整opacity的数值控制，0.1到1之间都可以尝试。

内容的提问来源于stack exchange，提问作者east.lake