html 日记 有隐藏按钮
2025-10-17 20:29:21
发布于：浙江
6阅读
0回复
0点赞
日记党的福星，懂吗？很长哦！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日记本</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
body {
display: flex;
height: 100vh;
background-color: #f5f5f5;
color: #333;
}
/* 左侧边栏样式 */
.sidebar {
width: 300px;
background-color: #fff;
border-right: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.app-header {
padding: 20px;
background-color: #4a6fa5;
color: white;
text-align: center;
}
.app-header h1 {
font-size: 1.5rem;
font-weight: 500;
}
.date-selector {
padding: 15px;
border-bottom: 1px solid #e0e0e0;
}
.date-selector input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.diary-list {
flex: 1;
overflow-y: auto;
padding: 10px 0;
}
.diary-item {
padding: 12px 15px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
justify-content: space-between;
align-items: center;
}
.diary-item:hover {
background-color: #f9f9f9;
}
.diary-item.active {
background-color: #e8f0fe;
border-left: 3px solid #4a6fa5;
}
.diary-content {
flex: 1;
}
.diary-date {
font-weight: 500;
margin-bottom: 5px;
}
.diary-preview {
font-size: 0.85rem;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.delete-btn {
background: none;
border: none;
color: #999;
cursor: pointer;
padding: 5px;
border-radius: 3px;
transition: all 0.2s;
opacity: 0;
}
.diary-item:hover .delete-btn {
opacity: 1;
}
.delete-btn:hover {
color: #e74c3c;
background-color: #f9f9f9;
}
/* 右侧编辑区域样式 */
.editor {
flex: 1;
display: flex;
flex-direction: column;
background-color: #fff;
margin: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
}
.toolbar {
display: flex;
padding: 10px 15px;
background-color: #f9f9f9;
border-bottom: 1px solid #e0e0e0;
align-items: center;
}
.toolbar button {
padding: 8px 12px;
margin-right: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.toolbar button:hover {
background-color: #f0f0f0;
}
.toolbar button.active {
background-color: #4a6fa5;
color: white;
border-color: #4a6fa5;
}
/* 绿色外部链接按钮 */
.external-btn {
background-color: #28a745;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-left: auto;
font-weight: 500;
transition: background-color 0.2s;
}
.external-btn:hover {
background-color: #218838;
}
.content-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tab-content {
flex: 1;
display: none;
padding: 20px;
overflow: auto;
}
.tab-content.active {
display: flex;
flex-direction: column;
}
#text-editor {
width: 100%;
height: 100%;
border: none;
resize: none;
font-size: 1rem;
line-height: 1.6;
padding: 10px;
outline: none;
}
.canvas-container {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
background-color: #fff;
overflow: hidden;
}
#drawing-canvas {
flex: 1;
cursor: crosshair;
touch-action: none; /* 防止触摸设备上的默认行为 */
}
#image-preview {
max-width: 100%;
max-height: 100%;
display: none;
}
.save-btn {
margin: 15px;
padding: 12px 20px;
background-color: #4a6fa5;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
align-self: flex-end;
transition: background-color 0.2s;
}
.save-btn:hover {
background-color: #3a5a8c;
}
.color-picker {
display: flex;
align-items: center;
margin-left: auto;
}
.color-option {
width: 25px;
height: 25px;
border-radius: 50%;
margin-left: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.color-option.active {
border-color: #333;
}
.brush-size {
margin-left: 15px;
display: flex;
align-items: center;
}
.brush-size label {
margin-right: 5px;
}
.drawing-tools {
display: flex;
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.drawing-tools button {
padding: 6px 10px;
margin-right: 5px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
/* 数据管理按钮 */
.data-management {
padding: 10px 15px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
}
.data-management button {
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.data-management button:hover {
background-color: #f0f0f0;
}
/* 确认删除对话框样式 */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
}
.modal-actions {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.modal-actions button {
padding: 8px 16px;
margin-left: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.cancel-btn {
background-color: #f0f0f0;
}
.confirm-delete-btn {
background-color: #e74c3c;
color: white;
}
.import-options {
margin-top: 15px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
.import-option {
margin-bottom: 10px;
}
.import-option label {
display: flex;
align-items: center;
cursor: pointer;
}
.import-option input {
margin-right: 8px;
}
/* 响应式设计 */
@media (max-width: 768px) {
body {
flex-direction: column;
}
.sidebar {
width: 100%;
height: 40%;
}
.editor {
margin: 10px;
}
.toolbar {
flex-wrap: wrap;
}
.external-btn {
margin-top: 10px;
margin-left: 0;
width: 100%;
}
}
</style>
</head>
<body>
<!-- 左侧边栏 -->
<div class="sidebar">
<div class="app-header">
<h1>我的永久日记本</h1>
</div>
<div class="date-selector">
<input type="date" id="date-picker">
</div>
<div class="diary-list" id="diary-list">
<!-- 日记列表将通过JavaScript动态生成 -->
</div>
<div class="data-management">
<button id="export-btn">导出所有日记</button>
<button id="import-btn">导入日记</button>
<input type="file" id="import-file" accept=".json" style="display: none;">
</div>
</div>
<!-- 右侧编辑区域 -->
<div class="editor">
<div class="toolbar">
<button id="text-btn" class="active">文本</button>
<button id="draw-btn">绘画</button>
<button id="image-btn">图片</button>
<!-- 绘画工具 -->
<div class="color-picker" id="color-picker" style="display: none;">
<div class="color-option active" style="background-color: #000000;" data-color="#000000"></div>
<div class="color-option" style="background-color: #ff0000;" data-color="#ff0000"></div>
<div class="color-option" style="background-color: #0000ff;" data-color="#0000ff"></div>
<div class="color-option" style="background-color: #008000;" data-color="#008000"></div>
</div>
<div class="brush-size" id="brush-size" style="display: none;">
<label>画笔大小:</label>
<input type="range" id="brush-slider" min="1" max="20" value="5">
</div>
<!-- 绿色外部链接按钮 -->
<button class="external-btn" id="external-btn">mc.js</button>
<input type="file" id="image-upload" accept="image/*" style="display: none;">
</div>
<div class="content-area">
<!-- 文本编辑区域 -->
<div id="text-tab" class="tab-content active">
<textarea id="text-editor" placeholder="写下今天的日记..."></textarea>
</div>
<!-- 绘画区域 -->
<div id="draw-tab" class="tab-content">
<div class="drawing-tools">
<button id="clear-canvas">清空画布</button>
<button id="eraser-btn">橡皮擦</button>
</div>
<div class="canvas-container">
<canvas id="drawing-canvas"></canvas>
</div>
</div>
<!-- 图片区域 -->
<div id="image-tab" class="tab-content">
<img id="image-preview" alt="上传的图片">
<p id="image-placeholder">点击上方"图片"按钮上传图片</p>
</div>
</div>
<button class="save-btn" id="save-btn">保存日记</button>
</div>
<!-- 删除确认对话框 -->
<div class="modal-overlay" id="delete-modal">
<div class="modal-content">
<h3>确认删除</h3>
<p>确定要删除这篇日记吗？此操作无法撤销。</p>
<div class="modal-actions">
<button class="cancel-btn" id="cancel-delete">取消</button>
<button class="confirm-delete-btn" id="confirm-delete">删除</button>
</div>
</div>
</div>
<!-- 导入选项对话框 -->
<div class="modal-overlay" id="import-modal">
<div class="modal-content">
<h3>导入日记</h3>
<p>选择导入选项：</p>
<div class="import-options">
<div class="import-option">
<label>
<input type="radio" name="import-mode" value="merge" checked>
<span>合并模式：只导入不存在的日记</span>
</label>
</div>
<div class="import-option">
<label>
<input type="radio" name="import-mode" value="overwrite">
<span>覆盖模式：替换所有已存在的日记</span>
</label>
</div>
</div>
<div class="modal-actions">
<button class="cancel-btn" id="cancel-import">取消</button>
<button class="confirm-delete-btn" id="confirm-import">导入</button>
</div>
</div>
</div>
<script>
// 获取DOM元素
const datePicker = document.getElementById('date-picker');
const diaryList = document.getElementById('diary-list');
const textBtn = document.getElementById('text-btn');
const drawBtn = document.getElementById('draw-btn');
const imageBtn = document.getElementById('image-btn');
const textTab = document.getElementById('text-tab');
const drawTab = document.getElementById('draw-tab');
const imageTab = document.getElementById('image-tab');
const textEditor = document.getElementById('text-editor');
const drawingCanvas = document.getElementById('drawing-canvas');
const imagePreview = document.getElementById('image-preview');
const imagePlaceholder = document.getElementById('image-placeholder');
const imageUpload = document.getElementById('image-upload');
const saveBtn = document.getElementById('save-btn');
const colorPicker = document.getElementById('color-picker');
const brushSize = document.getElementById('brush-size');
const brushSlider = document.getElementById('brush-slider');
const colorOptions = document.querySelectorAll('.color-option');
const clearCanvasBtn = document.getElementById('clear-canvas');
const eraserBtn = document.getElementById('eraser-btn');
const deleteModal = document.getElementById('delete-modal');
const cancelDeleteBtn = document.getElementById('cancel-delete');
const confirmDeleteBtn = document.getElementById('confirm-delete');
const exportBtn = document.getElementById('export-btn');
const importBtn = document.getElementById('import-btn');
const importFile = document.getElementById('import-file');
const importModal = document.getElementById('import-modal');
const cancelImportBtn = document.getElementById('cancel-import');
const confirmImportBtn = document.getElementById('confirm-import');
const externalBtn = document.getElementById('external-btn');
// 设置当前日期为默认值
const today = new Date();
datePicker.valueAsDate = today;
// 初始化画布
const ctx = drawingCanvas.getContext('2d');
let isDrawing = false;
let currentColor = '#000000';
let brushSizeValue = 5;
let isEraser = false;
let diaryToDelete = null;
let importData = null;
// 调整画布大小
function resizeCanvas() {
const container = drawingCanvas.parentElement;
drawingCanvas.width = container.clientWidth;
drawingCanvas.height = container.clientHeight;
// 设置画布背景为白色
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
// 设置线条样式
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
}
// 初始化画布
window.addEventListener('load', () => {
resizeCanvas();
loadDiary(datePicker.value);
updateDiaryList();
// 检查存储空间使用情况
checkStorageUsage();
});
window.addEventListener('resize', resizeCanvas);
// 绘画功能
drawingCanvas.addEventListener('mousedown', startDrawing);
drawingCanvas.addEventListener('mousemove', draw);
drawingCanvas.addEventListener('mouseup', stopDrawing);
drawingCanvas.addEventListener('mouseout', stopDrawing);
// 触摸事件支持
drawingCanvas.addEventListener('touchstart', handleTouchStart);
drawingCanvas.addEventListener('touchmove', handleTouchMove);
drawingCanvas.addEventListener('touchend', stopDrawing);
function handleTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousedown', {
clientX: touch.clientX,
clientY: touch.clientY
});
drawingCanvas.dispatchEvent(mouseEvent);
}
function handleTouchMove(e) {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
drawingCanvas.dispatchEvent(mouseEvent);
}
function startDrawing(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
}
function draw(e) {
if (!isDrawing) return;
ctx.lineWidth = brushSizeValue;
ctx.strokeStyle = isEraser ? '#ffffff' : currentColor;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
ctx.beginPath();
}
// 颜色选择
colorOptions.forEach(option => {
option.addEventListener('click', () => {
colorOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
currentColor = option.getAttribute('data-color');
isEraser = false;
eraserBtn.textContent = '橡皮擦';
});
});
// 画笔大小调整
brushSlider.addEventListener('input', () => {
brushSizeValue = brushSlider.value;
});
// 清空画布
clearCanvasBtn.addEventListener('click', () => {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
});
// 橡皮擦功能
eraserBtn.addEventListener('click', () => {
isEraser = !isEraser;
eraserBtn.textContent = isEraser ? '画笔' : '橡皮擦';
});
// 外部链接按钮 - 更新为新的网址
externalBtn.addEventListener('click', () => {
window.open('https://play.mc.js.cool/1.8/', '_blank');
});
// 标签切换
textBtn.addEventListener('click', () => {
setActiveTab('text');
});
drawBtn.addEventListener('click', () => {
setActiveTab('draw');
// 切换到绘画标签时重新调整画布大小
setTimeout(resizeCanvas, 10);
});
imageBtn.addEventListener('click', () => {
setActiveTab('image');
imageUpload.click();
});
function setActiveTab(tabName) {
// 重置所有标签和按钮状态
textTab.classList.remove('active');
drawTab.classList.remove('active');
imageTab.classList.remove('active');
textBtn.classList.remove('active');
drawBtn.classList.remove('active');
imageBtn.classList.remove('active');
colorPicker.style.display = 'none';
brushSize.style.display = 'none';
// 激活选中的标签
switch(tabName) {
case 'text':
textTab.classList.add('active');
textBtn.classList.add('active');
break;
case 'draw':
drawTab.classList.add('active');
drawBtn.classList.add('active');
colorPicker.style.display = 'flex';
brushSize.style.display = 'flex';
break;
case 'image':
imageTab.classList.add('active');
imageBtn.classList.add('active');
break;
}
}
// 图片上传
imageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
// 检查文件大小
if (file.size > 2 * 1024 * 1024) { // 2MB限制
alert('图片大小不能超过2MB，请选择较小的图片。');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
imagePreview.src = event.target.result;
imagePreview.style.display = 'block';
imagePlaceholder.style.display = 'none';
};
reader.readAsDataURL(file);
}
});
// 保存日记
saveBtn.addEventListener('click', saveDiary);
function saveDiary() {
const date = datePicker.value;
if (!date) {
alert('请选择日期');
return;
}
// 获取文本内容
const textContent = textEditor.value;
// 获取画布内容
const canvasContent = drawingCanvas.toDataURL();
// 获取图片内容
const imageContent = imagePreview.src;
// 创建日记对象
const diary = {
date: date,
text: textContent,
drawing: canvasContent,
image: imageContent
};
// 保存到localStorage
try {
localStorage.setItem(`diary_${date}`, JSON.stringify(diary));
} catch (e) {
if (e.name === 'QuotaExceededError') {
alert('存储空间不足，请导出部分日记或删除不需要的日记。');
return;
}
}
// 更新日记列表
updateDiaryList();
// 检查存储空间
checkStorageUsage();
alert('日记已保存！');
}
// 加载日记
function loadDiary(date) {
const diaryData = localStorage.getItem(`diary_${date}`);
if (diaryData) {
const diary = JSON.parse(diaryData);
// 加载文本内容
textEditor.value = diary.text || '';
// 加载画布内容
if (diary.drawing) {
const img = new Image();
img.onload = function() {
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.drawImage(img, 0, 0);
};
img.src = diary.drawing;
} else {
// 清空画布
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
}
// 加载图片
if (diary.image && diary.image.startsWith('data:')) {
imagePreview.src = diary.image;
imagePreview.style.display = 'block';
imagePlaceholder.style.display = 'none';
} else {
imagePreview.style.display = 'none';
imagePlaceholder.style.display = 'block';
}
} else {
// 清空所有内容
textEditor.value = '';
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
imagePreview.style.display = 'none';
imagePlaceholder.style.display = 'block';
}
}
// 删除日记
function deleteDiary(date) {
// 从localStorage中删除
localStorage.removeItem(`diary_${date}`);
// 如果当前正在查看被删除的日记，清空编辑区域
if (datePicker.value === date) {
textEditor.value = '';
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
imagePreview.style.display = 'none';
imagePlaceholder.style.display = 'block';
}
// 更新日记列表
updateDiaryList();
// 检查存储空间
checkStorageUsage();
}
// 显示删除确认对话框
function showDeleteModal(date) {
diaryToDelete = date;
deleteModal.style.display = 'flex';
}
// 隐藏删除确认对话框
function hideDeleteModal() {
deleteModal.style.display = 'none';
diaryToDelete = null;
}
// 确认删除事件
confirmDeleteBtn.addEventListener('click', () => {
if (diaryToDelete) {
deleteDiary(diaryToDelete);
hideDeleteModal();
}
});
// 取消删除事件
cancelDeleteBtn.addEventListener('click', hideDeleteModal);
// 点击模态框外部关闭
deleteModal.addEventListener('click', (e) => {
if (e.target === deleteModal) {
hideDeleteModal();
}
});
// 导出所有日记
exportBtn.addEventListener('click', exportAllDiaries);
function exportAllDiaries() {
// 获取所有日记
const allDiaries = {};
const keys = Object.keys(localStorage).filter(key => key.startsWith('diary_'));
keys.forEach(key => {
const date = key.replace('diary_', '');
const diaryData = localStorage.getItem(key);
allDiaries[date] = JSON.parse(diaryData);
});
// 创建导出数据
const exportData = {
version: '1.0',
exportDate: new Date().toISOString(),
diaryCount: keys.length,
diaries: allDiaries
};
// 创建下载链接
const dataStr = JSON.stringify(exportData, null, 2);
const dataBlob = new Blob([dataStr], {type: 'application/json'});
const url = URL.createObjectURL(dataBlob);
const link = document.createElement('a');
link.href = url;
link.download = `diary_backup_${new Date().toISOString().split('T')[0]}.json`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
alert(`已成功导出 ${keys.length} 篇日记！`);
}
// 导入日记
importBtn.addEventListener('click', () => {
importFile.click();
});
importFile.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
try {
// 解析JSON文件
const parsedData = JSON.parse(event.target.result);
// 验证导入数据格式
if (!parsedData.diaries || typeof parsedData.diaries !== 'object') {
throw new Error('无效的日记文件格式');
}
// 保存导入数据并显示选项对话框
importData = parsedData;
showImportModal();
} catch (error) {
console.error('导入错误:', error);
alert('导入失败：文件格式不正确或已损坏。请确保选择的是有效的日记备份文件。');
}
};
reader.onerror = function() {
alert('读取文件失败，请重试。');
};
reader.readAsText(file);
});
// 显示导入选项对话框
function showImportModal() {
importModal.style.display = 'flex';
}
// 隐藏导入选项对话框
function hideImportModal() {
importModal.style.display = 'none';
importData = null;
importFile.value = ''; // 重置文件输入
}
// 确认导入事件
confirmImportBtn.addEventListener('click', () => {
if (!importData) return;
const importMode = document.querySelector('input[name="import-mode"]:checked').value;
performImport(importMode);
hideImportModal();
});
// 取消导入事件
cancelImportBtn.addEventListener('click', hideImportModal);
// 点击模态框外部关闭
importModal.addEventListener('click', (e) => {
if (e.target === importModal) {
hideImportModal();
}
});
// 执行导入操作
function performImport(mode) {
if (!importData || !importData.diaries) return;
let importedCount = 0;
let skippedCount = 0;
let overwrittenCount = 0;
try {
// 导入每篇日记
Object.keys(importData.diaries).forEach(date => {
const diary = importData.diaries[date];
// 检查是否已存在该日期的日记
const existingDiary = localStorage.getItem(`diary_${date}`);
if (existingDiary) {
if (mode === 'overwrite') {
// 覆盖模式：替换已存在的日记
localStorage.setItem(`diary_${date}`, JSON.stringify(diary));
overwrittenCount++;
} else {
// 合并模式：跳过已存在的日记
skippedCount++;
}
} else {
// 导入不存在的日记
localStorage.setItem(`diary_${date}`, JSON.stringify(diary));
importedCount++;
}
});
// 更新界面
updateDiaryList();
checkStorageUsage();
// 显示导入结果
let message = `导入完成！成功导入 ${importedCount} 篇日记。`;
if (overwrittenCount > 0) {
message += ` 覆盖了 ${overwrittenCount} 篇已存在的日记。`;
}
if (skippedCount > 0) {
message += ` 跳过了 ${skippedCount} 篇已存在的日记。`;
}
alert(message);
} catch (error) {
console.error('导入过程中发生错误:', error);
alert('导入过程中发生错误，部分日记可能未成功导入。');
}
}
// 检查存储空间使用情况
function checkStorageUsage() {
// 计算已使用的存储空间
let totalSize = 0;
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
totalSize += localStorage[key].length;
}
}
// 转换为KB和MB
const sizeKB = Math.round(totalSize / 1024);
const sizeMB = Math.round(totalSize / 1024 / 1024);
// 显示警告（如果接近限制）
if (sizeMB > 3) { // 超过3MB时显示警告
const warningMsg = `存储空间使用情况：${sizeKB}KB (约${sizeMB}MB)。建议定期导出日记以释放空间。`;
console.warn(warningMsg);
// 每10次保存显示一次警告
if (Math.random() < 0.1) {
alert(warningMsg);
}
}
}
// 更新日记列表
function updateDiaryList() {
diaryList.innerHTML = '';
// 获取所有日记的键
const keys = Object.keys(localStorage).filter(key => key.startsWith('diary_'));
// 按日期排序（最新的在前面）
keys.sort((a, b) => {
const dateA = a.replace('diary_', '');
const dateB = b.replace('diary_', '');
return dateB.localeCompare(dateA);
});
// 创建日记列表项
keys.forEach(key => {
const date = key.replace('diary_', '');
const diaryData = localStorage.getItem(key);
const diary = JSON.parse(diaryData);
const diaryItem = document.createElement('div');
diaryItem.className = 'diary-item';
if (date === datePicker.value) {
diaryItem.classList.add('active');
}
const diaryContent = document.createElement('div');
diaryContent.className = 'diary-content';
const diaryDate = document.createElement('div');
diaryDate.className = 'diary-date';
diaryDate.textContent = formatDate(date);
const diaryPreview = document.createElement('div');
diaryPreview.className = 'diary-preview';
diaryPreview.textContent = diary.text ? diary.text.substring(0, 30) + '...' : '无文本内容';
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.innerHTML = '×';
deleteBtn.title = '删除日记';
diaryContent.appendChild(diaryDate);
diaryContent.appendChild(diaryPreview);
diaryItem.appendChild(diaryContent);
diaryItem.appendChild(deleteBtn);
// 点击日记项加载日记
diaryItem.addEventListener('click', (e) => {
// 如果点击的是删除按钮，不加载日记
if (e.target === deleteBtn) return;
// 移除所有active类
document.querySelectorAll('.diary-item').forEach(item => {
item.classList.remove('active');
});
// 添加active类到当前项
diaryItem.classList.add('active');
// 更新日期选择器
datePicker.value = date;
// 加载日记内容
loadDiary(date);
});
// 点击删除按钮显示确认对话框
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation(); // 阻止事件冒泡，避免触发日记加载
showDeleteModal(date);
});
diaryList.appendChild(diaryItem);
});
// 如果没有日记，显示提示
if (keys.length === 0) {
const emptyMessage = document.createElement('div');
emptyMessage.className = 'diary-item';
emptyMessage.textContent = '暂无日记，开始写第一篇日记吧！';
diaryList.appendChild(emptyMessage);
}
}
// 格式化日期显示
function formatDate(dateString) {
const date = new Date(dateString);
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
return date.toLocaleDateString('zh-CN', options);
}
// 初始化
datePicker.addEventListener('change', () => {
loadDiary(datePicker.value);
updateDiaryList();
});
</script>
</body>
</html>
这里空空如也
有帮助，赞一个