<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电子日记本</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
#editor {
border: 1px solid #ccc;
min-height: 200px;
padding: 10px;
margin: 10px 0;
white-space: pre-wrap;
}
.button-group button {
margin: 5px;
padding: 8px 15px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-group button.delete {
background: #ff4444;
}
.button-group button:hover {
background: #45a049;
}
.button-group button.delete:hover {
background: #cc0000;
}
.entry-item {
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
border-radius: 4px;
}
.entry-item input[type="checkbox"] {
margin-right: 10px;
}
.entry-content {
margin: 10px 0;
color: #666;
}
img {
max-width: 100%;
height: auto;
margin: 5px 0;
}
</style>
</head>
<body>
<div id="editor" contenteditable="true"></div>
<div class="button-group">
<button>添加图片附件</button>
<button>保存</button>
<button>另存为</button>
<button class="delete">删除</button>
</div>
<div id="entries"></div>
<script>
function addImage() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function() {
const img = document.createElement('img');
img.src = reader.result;
const selection = window.getSelection();
const range = selection.getRangeAt(0);
range.insertNode(document.createElement('br'));
range.insertNode(img);
range.collapse(false);
};
reader.readAsDataURL(file);
};
input.click();
}
function saveEntry() {
const editor = document.getElementById('editor');
const timestamp = new Date().getTime();
const dateStr = new Date().toLocaleString();
const entry = {
content: editor.innerHTML,
date: dateStr,
timestamp: timestamp
};
localStorage.setItem(`entry_${timestamp}`, JSON.stringify(entry));
showEntries();
editor.innerHTML = '';
}
function showEntries() {
const entriesDiv = document.getElementById('entries');
entriesDiv.innerHTML = '';
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('entry_')) {
const entry = JSON.parse(localStorage.getItem(key));
const entryHTML = `
<div class="entry-item">
<input type="checkbox" id="${entry.timestamp}">
<label for="${entry.timestamp}"><strong>${entry.date}</strong></label>
<div class="entry-content">${entry.content}</div>
</div>
`;
entriesDiv.innerHTML += entryHTML;
}
}
}
function exportEntries() {
const checkboxes = document.querySelectorAll('#entries input[type="checkbox"]:checked');
if (checkboxes.length === 0) {
alert('请先选择要导出的日记');
return;
}
let exportContent = '<html><head><meta charset="UTF-8"><title>导出的日记</title></head><body>';
checkboxes.forEach(checkbox => {
const entry = JSON.parse(localStorage.getItem(`entry_${checkbox.id}`));
exportContent += `<h2>${entry.date}</h2>`;
exportContent += `<div>${entry.content}</div><hr>`;
});
exportContent += '</body></html>';
const blob = new Blob([exportContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `日记_${new Date().toLocaleDateString()}.html`;
a.click();
URL.revokeObjectURL(url);
}
function deleteEntries() {
const checkboxes = document.querySelectorAll('#entries input[type="checkbox"]:checked');
if (checkboxes.length === 0) {
alert('请先选择要删除的日记');
return;
}
if (!confirm(`确定要删除选中的 ${checkboxes.length} 篇日记吗？`)) return;
checkboxes.forEach(checkbox => {
localStorage.removeItem(`entry_${checkbox.id}`);
});
showEntries();
}
showEntries();
</script>
</body>
</html>
[复制链接]
发表于 2025-3-20 10:07
|
发表于 2025-3-20 16:34
