DataDreamerX/clock

1// Theme Management
2const themeToggleBtn = document.getElementById('theme-toggle');
3const themeMenu = document.getElementById('theme-menu');
4const themeBtns = document.querySelectorAll('.theme-btn');
5
6// Toggle menu visibility
7themeToggleBtn.addEventListener('click', (e) => {
8    e.stopPropagation();
9    themeMenu.classList.toggle('hidden');
10});
11
12// Close menu when clicking outside
13document.addEventListener('click', (e) => {
14    if (!themeMenu.contains(e.target) && !themeToggleBtn.contains(e.target)) {
15        themeMenu.classList.add('hidden');
16    }
17});
18
19// Set theme
20function setTheme(themeName) {
21    document.body.setAttribute('data-theme', themeName);
22    localStorage.setItem('desktop-clock-theme', themeName);
23}
24
25// Initialize theme from local storage or default
26const savedTheme = localStorage.getItem('desktop-clock-theme') || 'midnight';
27setTheme(savedTheme);
28
29// Theme button listeners
30themeBtns.forEach(btn => {
31    btn.addEventListener('click', () => {
32        const theme = btn.getAttribute('data-theme');
33        setTheme(theme);
34        themeMenu.classList.add('hidden');
35    });
36});
37
38function updateClock() {
39    const now = new Date();
40
41    // Time (HH:MM)
42    const hours = String(now.getHours()).padStart(2, '0');
43    const minutes = String(now.getMinutes()).padStart(2, '0');
44    const timeString = `${hours}:${minutes}`;
45
46    // Date (YYYY年MM月DD日 星期X)
47    const year = now.getFullYear();
48    const month = now.getMonth() + 1;
49    const date = now.getDate();
50    const dayOfWeek = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()];
51    const dateString = `${year}年${month}月${date}日 星期${dayOfWeek}`;
52
53    // Lunar Date
54    // Using lunar-javascript library which exposes 'Lunar' globally
55    let lunarString = '';
56    try {
57        const lunar = Lunar.fromDate(now);
58        lunarString = `农历${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}`;
59
60        // Optional: Add GanZhi or other details if needed, but keeping it simple as requested
61        // lunarString += ` ${lunar.getYearInGanZhi()}年`; 
62    } catch (e) {
63        console.error("Lunar library error:", e);
64        lunarString = "农历加载失败";
65    }
66
67    // Update DOM
68    document.getElementById('time-display').textContent = timeString;
69    document.getElementById('solar-date').textContent = dateString;
70    document.getElementById('lunar-date').textContent = lunarString;
71}
72
73// Initial call
74updateClock();
75
76// Update every second to ensure minute changes are caught immediately
77setInterval(updateClock, 1000);
78