时间倒数

const now = new Date();
const pad = (n) => String(n).padStart(2, '0');
 
const hours = now.getHours();
const dayPercent = ((hours / 24) * 100).toFixed(1);
const dayOfWeek = now.getDay() || 7;
const weekPercent = ((dayOfWeek / 7) * 100).toFixed(1);
const dayOfMonth = now.getDate();
const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
const monthPercent = ((dayOfMonth / daysInMonth) * 100).toFixed(1);
const monthOfYear = now.getMonth() + 1;
const yearPercent = ((monthOfYear / 12) * 100).toFixed(1);
 
const items = [
  { title: "今日已经过去", endTitle: "小时", num: hours, percent: dayPercent, color: "#50bfff" },
  { title: "本周已经过去", endTitle: "天", num: dayOfWeek, percent: weekPercent, color: "#5d93db" },
  { title: "本月已经过去", endTitle: "天", num: dayOfMonth, percent: monthPercent, color: "#fb734a" },
  { title: "今年已经过去", endTitle: "个月", num: monthOfYear, percent: yearPercent, color: "#ffa87e" }
];
 
let html = `<div style="background:var(--background-primary-alt);border-radius:12px;padding:16px;border:1px solid var(--background-modifier-border);">`;
html += `<div style="font-weight:600;margin-bottom:12px;">⏳ 朝花夕拾，拾取欢乐！</div>`;
items.forEach(item => {
  html += `
    <div style="margin-bottom:10px;">
      <div style="display:flex;justify-content:space-between;font-size:0.9em;margin-bottom:4px;color:var(--text-muted);">
        <span>${item.title} <strong style="color:var(--text-normal);">${item.num}</strong> ${item.endTitle}</span>
        <span style="font-weight:600;color:var(--text-normal);">${item.percent}%</span>
      </div>
      <div style="height:6px;background:var(--background-modifier-border);border-radius:3px;overflow:hidden;">
        <div style="height:100%;width:${item.percent}%;background:${item.color};border-radius:3px;"></div>
      </div>
    </div>`;
});
html += `</div>`;
 
dv.container.innerHTML = html;