https://fangg.netlify.app/js/apps/notepad.js

1// 记事本状态
2let isWordWrap = true;
3let savedContent = '';
4
5// 初始化记事本
6function initNotepad() {
7    const textarea = document.getElementById('notepad-textarea');
8    textarea.classList.add('word-wrap');
9    
10    // 从本地存储加载内容
11    const savedText = localStorage.getItem('notepadContent');
12    if (savedText) {
13        textarea.value = savedText;
14        savedContent = savedText;
15        updateWordCount();
16    }
17    
18    // 添加输入事件监听器
19    textarea.addEventListener('input', () => {
20        updateWordCount();
21        updateCursorPosition();
22    });
23    
24    // 添加光标位置更新事件
25    textarea.addEventListener('click', updateCursorPosition);
26    textarea.addEventListener('keyup', updateCursorPosition);
27}
28
29// 更新字数统计
30function updateWordCount() {
31    const textarea = document.getElementById('notepad-textarea');
32    const text = textarea.value;
33    const wordCount = text.trim() ? text.length : 0;
34    
35    const statusBar = document.querySelector('#notes-window .status-bar');
36    statusBar.children[1].textContent = `字數：${wordCount}`;
37}
38
39// 更新光标位置
40function updateCursorPosition() {
41    const textarea = document.getElementById('notepad-textarea');
42    const cursorPosition = textarea.selectionStart;
43    const text = textarea.value.substring(0, cursorPosition);
44    const lines = text.split('\n');
45    const currentLine = lines.length;
46    const currentColumn = lines[lines.length - 1].length + 1;
47    
48    const statusBar = document.querySelector('#notes-window .status-bar');
49    statusBar.children[2].textContent = `Ln ${currentLine}, Col ${currentColumn}`;
50}
51
52// 切换自动换行
53function toggleWordWrap() {
54    const textarea = document.getElementById('notepad-textarea');
55    isWordWrap = !isWordWrap;
56    
57    if (isWordWrap) {
58        textarea.classList.remove('no-wrap');
59        textarea.classList.add('word-wrap');
60    } else {
61        textarea.classList.remove('word-wrap');
62        textarea.classList.add('no-wrap');
63    }
64}
65
66// 显示清空确认弹窗
67function clearNotepad() {
68    const confirmDialog = document.getElementById('notepad-clear-confirm');
69    const modalOverlay = document.getElementById('notepad-modal-overlay');
70    
71    // 显示遮罩和弹窗
72    modalOverlay.style.display = 'block';
73    confirmDialog.style.display = 'block';
74    
75    // 确保弹窗在最上层
76    modalOverlay.style.zIndex = '99999';
77    confirmDialog.style.zIndex = '100000';
78    
79    // 禁用其他窗口的拖动
80    const windows = document.querySelectorAll('.window');
81    windows.forEach(win => {
82        if (win.id !== 'notepad-clear-confirm') {
83            win.style.pointerEvents = 'none';
84        }
85    });
86}
87
88// 确认清空内容
89function confirmClearNotepad() {
90    const textarea = document.getElementById('notepad-textarea');
91    textarea.value = '';
92    updateWordCount();
93    updateCursorPosition();
94    
95    // 关闭模态弹窗
96    closeNotepadModal();
97}
98
99// 取消清空操作
100function cancelClearNotepad() {
101    closeNotepadModal();
102}
103
104// 关闭模态弹窗
105function closeNotepadModal() {
106    const confirmDialog = document.getElementById('notepad-clear-confirm');
107    const modalOverlay = document.getElementById('notepad-modal-overlay');
108    
109    // 隐藏遮罩和弹窗
110    modalOverlay.style.display = 'none';
111    confirmDialog.style.display = 'none';
112    
113    // 重置 z-index
114    modalOverlay.style.zIndex = '';
115    confirmDialog.style.zIndex = '';
116    
117    // 恢复其他窗口的拖动
118    const windows = document.querySelectorAll('.window');
119    windows.forEach(win => {
120        win.style.pointerEvents = 'auto';
121    });
122}
123
124// 保存内容
125function saveNotepad() {
126    const textarea = document.getElementById('notepad-textarea');
127    const content = textarea.value;
128    
129    // 保存到本地存储
130    localStorage.setItem('notepadContent', content);
131    savedContent = content;
132    
133    // 更新状态栏
134    const statusBar = document.querySelector('#notes-window .status-bar');
135    statusBar.children[0].textContent = '已保存';
136    
137    // 2秒后恢复状态栏
138    setTimeout(() => {
139        statusBar.children[0].textContent = '就緒';
140    }, 2000);
141}
142
143// 在窗口加载时初始化记事本
144window.addEventListener('load', () => {
145    initNotepad();
146});