From e4e4428467206a3e06baf3c0509e1c5d23a94ce4 Mon Sep 17 00:00:00 2001
From: exyone <exyone.dev@icloud.com>
Date: Mon, 8 Dec 2025 04:42:44 +0000
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 analog-clock.html |  44 ++++++++++
 calculator.html   | 124 +++++++++++++++++++++++++++
 calendar.html     | 209 ++++++++++++++++++++++++++++++++++++++++++++++
 nav-links.html    |  13 +++
 quick-links.html  |   7 ++
 5 files changed, 397 insertions(+)
 create mode 100644 analog-clock.html
 create mode 100644 calculator.html
 create mode 100644 calendar.html
 create mode 100644 nav-links.html
 create mode 100644 quick-links.html
diff --git a/analog-clock.html b/analog-clock.html
new file mode 100644
index 0000000..c352062
--- /dev/null
+++ b/analog-clock.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模拟时钟组件</title>
+    <link rel="stylesheet" href="../../assets/css/widgets.css">
+</head>
+<body>
+    <div class="widget glass analog-clock-widget">
+        <div class="clock-face">
+            <div class="clock-hour"></div>
+            <div class="clock-minute"></div>
+            <div class="clock-second"></div>
+            <div class="clock-center"></div>
+        </div>
+        <div class="clock-label">模拟时钟</div>
+    </div>
+
+    <script>
+        // 模拟时钟功能
+        function updateAnalogClock() {
+            const now = new Date();
+            const hours = now.getHours() % 12;
+            const minutes = now.getMinutes();
+            const seconds = now.getSeconds();
+            
+            // 计算指针角度
+            const hourDegrees = (hours * 30) + (minutes * 0.5);
+            const minuteDegrees = (minutes * 6) + (seconds * 0.1);
+            const secondDegrees = seconds * 6;
+            
+            // 更新指针位置
+            document.querySelector('.clock-hour').style.transform = 'translateX(-50%) rotate(' + hourDegrees + 'deg)';
+            document.querySelector('.clock-minute').style.transform = 'translateX(-50%) rotate(' + minuteDegrees + 'deg)';
+            document.querySelector('.clock-second').style.transform = 'translateX(-50%) rotate(' + secondDegrees + 'deg)';
+        }
+        
+        // 初始化时钟并每秒更新
+        updateAnalogClock();
+        setInterval(updateAnalogClock, 1000);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/calculator.html b/calculator.html
new file mode 100644
index 0000000..4d130ca
--- /dev/null
+++ b/calculator.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>计算器组件</title>
+    <link rel="stylesheet" href="../../assets/css/widgets.css">
+</head>
+<body>
+    <div class="widget glass">
+        <h3 class="widget-title">计算器</h3>
+        <div class="calculator-display" id="calc-display">0</div>
+        <div class="calculator-buttons">
+            <button class="calc-btn" data-value="C">C</button>
+            <button class="calc-btn" data-value="+">+</button>
+            <button class="calc-btn" data-value="-">-</button>
+            <button class="calc-btn" data-value="/">/</button>
+            <button class="calc-btn" data-value="7">7</button>
+            <button class="calc-btn" data-value="8">8</button>
+            <button class="calc-btn" data-value="9">9</button>
+            <button class="calc-btn" data-value="*">*</button>
+            <button class="calc-btn" data-value="4">4</button>
+            <button class="calc-btn" data-value="5">5</button>
+            <button class="calc-btn" data-value="6">6</button>
+            <button class="calc-btn" data-value=".">.</button>
+            <button class="calc-btn" data-value="1">1</button>
+            <button class="calc-btn" data-value="2">2</button>
+            <button class="calc-btn" data-value="3">3</button>
+            <button class="calc-btn calc-equals" data-value="=">=</button>
+            <button class="calc-btn" data-value="0">0</button>
+            <button class="calc-btn" data-value="00">00</button>
+        </div>
+    </div>
+
+    <script>
+        // 计算器功能
+        const display = document.getElementById('calc-display');
+        let currentValue = '0';
+        let previousValue = null;
+        let operator = null;
+        let resetOnNextInput = false;
+        
+        function updateDisplay() {
+            display.textContent = currentValue;
+        }
+        
+        function handleNumber(value) {
+            if (resetOnNextInput) {
+                currentValue = '0';
+                resetOnNextInput = false;
+            }
+            
+            if (currentValue === '0' && value !== '.') {
+                currentValue = value;
+            } else if (value === '.' && currentValue.includes('.')) {
+                // 不允许重复的小数点
+                return;
+            } else {
+                currentValue += value;
+            }
+            
+            updateDisplay();
+        }
+        
+        function handleOperator(nextOperator) {
+            const inputValue = parseFloat(currentValue);
+            
+            if (operator && resetOnNextInput) {
+                operator = nextOperator;
+                return;
+            }
+            
+            if (previousValue !== null && operator) {
+                try {
+                    // 使用 Function 来安全地计算表达式
+                    const expression = `${previousValue} ${operator} ${inputValue}`;
+                    // 简单的安全检查
+                    if (/^[\d\s\+\-\*\/\.]+$/.test(expression)) {
+                        const result = new Function('return ' + expression)();
+                        currentValue = String(result);
+                        previousValue = result;
+                    }
+                } catch (e) {
+                    currentValue = 'Error';
+                }
+            } else {
+                previousValue = inputValue;
+            }
+            
+            operator = nextOperator;
+            resetOnNextInput = true;
+            updateDisplay();
+        }
+        
+        function handleClear() {
+            currentValue = '0';
+            previousValue = null;
+            operator = null;
+            resetOnNextInput = false;
+            updateDisplay();
+        }
+        
+        // 事件监听
+        document.querySelectorAll('.calc-btn').forEach(button => {
+            button.addEventListener('click', () => {
+                const value = button.getAttribute('data-value');
+                
+                if (value === 'C') {
+                    handleClear();
+                } else if (['+', '-', '*', '/'].includes(value)) {
+                    handleOperator(value);
+                } else if (value === '=') {
+                    handleOperator('=');
+                } else {
+                    handleNumber(value);
+                }
+            });
+        });
+        
+        // 初始化
+        updateDisplay();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/calendar.html b/calendar.html
new file mode 100644
index 0000000..3410638
--- /dev/null
+++ b/calendar.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>日历组件</title>
+    <link rel="stylesheet" href="../../assets/css/widgets.css">
+    
+</head>
+<body>
+    <div class="widget glass calendar-widget">
+        <div class="calendar-header">
+            <button class="calendar-nav" id="prev-month">&lt;</button>
+            <h3 id="current-month-year">2024年1月</h3>
+            <button class="calendar-nav" id="next-month">&gt;</button>
+        </div>
+        <div class="calendar-grid">
+            <!-- 星期标题 -->
+            <div class="calendar-weekday">日</div>
+            <div class="calendar-weekday">一</div>
+            <div class="calendar-weekday">二</div>
+            <div class="calendar-weekday">三</div>
+            <div class="calendar-weekday">四</div>
+            <div class="calendar-weekday">五</div>
+            <div class="calendar-weekday">六</div>
+            
+            <!-- 日期单元格将通过JavaScript动态生成 -->
+        </div>
+    </div>
+
+    <script>
+        // 日历功能 - 重构版本
+        (function() {
+            let currentDate = new Date();
+            let selectedDate = null;
+            
+            // 渲染日历函数
+            function renderCalendar() {
+                try {
+                    const year = currentDate.getFullYear();
+                    const month = currentDate.getMonth();
+                    
+                    // 更新月份标题
+                    const titleElement = document.getElementById('current-month-year');
+                    if (titleElement) {
+                        titleElement.textContent = `${year}年${month + 1}月`;
+                    }
+                    
+                    // 获取日历网格容器
+                    const calendarGrid = document.querySelector('.calendar-grid');
+                    if (!calendarGrid) {
+                        console.error('日历网格容器未找到');
+                        return;
+                    }
+                    
+                    // 保留星期标题，移除所有日期单元格
+                    const weekdayHeaders = Array.from(calendarGrid.querySelectorAll('.calendar-weekday'));
+                    calendarGrid.innerHTML = '';
+                    
+                    // 重新添加星期标题
+                    weekdayHeaders.forEach(header => calendarGrid.appendChild(header));
+                    
+                    // 获取当月第一天和最后一天
+                    const firstDay = new Date(year, month, 1);
+                    const lastDay = new Date(year, month + 1, 0);
+                    
+                    const daysInMonth = lastDay.getDate();
+                    const startingDay = firstDay.getDay();
+                    
+                    // 获取今天的日期用于比较
+                    const today = new Date();
+                    
+                    // 添加上月的最后几天
+                    const prevMonthLastDay = new Date(year, month, 0).getDate();
+                    for (let i = startingDay - 1; i >= 0; i--) {
+                        const dayDiv = createDayElement(prevMonthLastDay - i, false);
+                        dayDiv.classList.add('other-month');
+                        calendarGrid.appendChild(dayDiv);
+                    }
+                    
+                    // 添加当月的天数
+                    for (let i = 1; i <= daysInMonth; i++) {
+                        const dayDiv = createDayElement(i, true);
+                        dayDiv.setAttribute('data-date', `${year}-${month + 1}-${i}`);
+                        
+                        // 高亮今天
+                        if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
+                            dayDiv.classList.add('today');
+                        }
+                        
+                        // 高亮选中的日期
+                        if (selectedDate && i === selectedDate.getDate() && month === selectedDate.getMonth() && year === selectedDate.getFullYear()) {
+                            dayDiv.classList.add('selected');
+                        }
+                        
+                        calendarGrid.appendChild(dayDiv);
+                    }
+                    
+                    // 添加下月的开始几天，确保日历始终显示6行
+                    const totalCells = 42; // 6行7列 = 42个单元格（包括星期标题）
+                    const currentCells = 7 + startingDay + daysInMonth; // 7个星期标题 + 上月天数 + 当月天数
+                    const remainingDays = totalCells - currentCells;
+                    
+                    for (let i = 1; i <= remainingDays; i++) {
+                        const dayDiv = createDayElement(i, false);
+                        dayDiv.classList.add('other-month');
+                        calendarGrid.appendChild(dayDiv);
+                    }
+                } catch (error) {
+                    console.error('渲染日历出错:', error);
+                }
+            }
+            
+            // 创建日期元素
+            function createDayElement(day, isCurrentMonth) {
+                const dayDiv = document.createElement('div');
+                dayDiv.className = 'calendar-day';
+                dayDiv.textContent = day;
+                
+                // 只有当前月的日期可以点击选择
+                if (isCurrentMonth) {
+                    dayDiv.addEventListener('click', () => handleDayClick(day));
+                    dayDiv.setAttribute('tabindex', '0'); // 使其可聚焦
+                    dayDiv.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            handleDayClick(day);
+                            e.preventDefault();
+                        }
+                    });
+                }
+                
+                return dayDiv;
+            }
+            
+            // 处理日期点击
+            function handleDayClick(day) {
+                try {
+                    const year = currentDate.getFullYear();
+                    const month = currentDate.getMonth();
+                    selectedDate = new Date(year, month, day);
+                    
+                    // 触发日期选择事件
+                    const event = new CustomEvent('date-selected', {
+                        detail: { date: selectedDate }
+                    });
+                    document.dispatchEvent(event);
+                    
+                    // 重新渲染以更新选中状态
+                    renderCalendar();
+                } catch (error) {
+                    console.error('处理日期点击出错:', error);
+                }
+            }
+            
+            // 绑定导航按钮事件
+            function bindNavigationEvents() {
+                try {
+                    const prevButton = document.getElementById('prev-month');
+                    const nextButton = document.getElementById('next-month');
+                    
+                    if (prevButton) {
+                        prevButton.addEventListener('click', () => {
+                            currentDate.setMonth(currentDate.getMonth() - 1);
+                            renderCalendar();
+                        });
+                    }
+                    
+                    if (nextButton) {
+                        nextButton.addEventListener('click', () => {
+                            currentDate.setMonth(currentDate.getMonth() + 1);
+                            renderCalendar();
+                        });
+                    }
+                    
+                    // 添加键盘导航
+                    document.addEventListener('keydown', (e) => {
+                        if (e.key === 'ArrowLeft') {
+                            currentDate.setMonth(currentDate.getMonth() - 1);
+                            renderCalendar();
+                        } else if (e.key === 'ArrowRight') {
+                            currentDate.setMonth(currentDate.getMonth() + 1);
+                            renderCalendar();
+                        }
+                    });
+                } catch (error) {
+                    console.error('绑定导航事件出错:', error);
+                }
+            }
+            
+            // 初始化日历
+            function initCalendar() {
+                try {
+                    bindNavigationEvents();
+                    renderCalendar();
+                } catch (error) {
+                    console.error('初始化日历出错:', error);
+                }
+            }
+            
+            // 当DOM加载完成后初始化
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', initCalendar);
+            } else {
+                initCalendar();
+            }
+        })();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/nav-links.html b/nav-links.html
new file mode 100644
index 0000000..42444d1
--- /dev/null
+++ b/nav-links.html
@@ -0,0 +1,13 @@
+<div class="nav-links" id="nav-links">
+    <a href="http://blog.exyone.me" class="nav-link">📝 博客</a>
+    <a href="http://bbs.exyone.me" class="nav-link">💬 论坛</a>
+    <a href="http://git.exyone.me" class="nav-link" target="_blank">🔧 Git</a>
+    <!-- 实用工具链接 -->
+    <a href="https://google.com" class="nav-link" target="_blank">🔍 Google</a>
+    <a href="https://yandex.com" class="nav-link" target="_blank">🌐 Yandex</a>
+    <a href="https://www.youtube.com" class="nav-link" target="_blank">📺 YouTube</a>
+    <a href="https://www.bilibili.com" class="nav-link" target="_blank">📽️ Bilibili</a>
+    <a href="https://music.163.com/" class="nav-link" target="_blank">🎵 网易云音乐</a>
+    <a href="https://www.bing.com/translator" class="nav-link" target="_blank">🌍 必应翻译</a>
+    <a href="friendwebsite.html" class="nav-link" target="_blank">🤝 友站链接</a>
+</div>
\ No newline at end of file
diff --git a/quick-links.html b/quick-links.html
new file mode 100644
index 0000000..681a5af
--- /dev/null
+++ b/quick-links.html
@@ -0,0 +1,7 @@
+<!-- 快速链接 - 合并到顶部栏 -->
+<div class="quick-links">
+    <a href="https://linkedin.com" class="quick-link" target="_blank" title="LinkedIn">💼</a>
+    <a href="https://facebook.com" class="quick-link" target="_blank" title="Facebook">📘</a>
+    <a href="https://instagram.com" class="quick-link" target="_blank" title="Instagram">📸</a>
+    <a href="mailto:exyone.dev@icloud.com" class="quick-link" title="邮箱">📧</a>
+</div>
\ No newline at end of file
