js实现记事
使用JavaScript实现记事本功能
HTML结构 创建一个基本的HTML结构，包含文本输入区域和功能按钮。
<!DOCTYPE html>
<html>
<head>
<title>简易记事本</title>
<style>
#notepad {
width: 100%;
height: 300px;
}
.controls {
margin: 10px 0;
}
</style>
</head>
<body>
<textarea id="notepad"></textarea>
<div class="controls">
<button id="save">保存</button>
<button id="clear">清空</button>
<button id="load">加载</button>
</div>
<script src="notepad.js"></script>
</body>
</html>JavaScript功能实现 创建一个notepad.js文件，实现记事本的核心功能。
// 获取DOM元素
const notepad = document.getElementById('notepad');
const saveBtn = document.getElementById('save');
const clearBtn = document.getElementById('clear');
const loadBtn = document.getElementById('load');
// 保存内容到本地存储
saveBtn.addEventListener('click', () => {
localStorage.setItem('notepadContent', notepad.value);
alert('内容已保存');
});
// 清空记事本
clearBtn.addEventListener('click', () => {
notepad.value = '';
});
// 从本地存储加载内容
loadBtn.addEventListener('click', () => {
const savedContent = localStorage.getItem('notepadContent');
if(savedContent) {
notepad.value = savedContent;
} else {
alert('没有找到保存的内容');
}
});增强功能实现
添加日期时间戳 在保存内容时自动添加时间戳。
saveBtn.addEventListener('click', () => {
const timestamp = new Date().toLocaleString();
const contentWithTimestamp = `[${timestamp}]\n${notepad.value}`;
localStorage.setItem('notepadContent', contentWithTimestamp);
notepad.value = contentWithTimestamp;
alert('内容已保存');
});添加文件导出功能 实现将内容导出为文本文件。
const exportBtn = document.createElement('button');
exportBtn.textContent = '导出';
document.querySelector('.controls').appendChild(exportBtn);
exportBtn.addEventListener('click', () => {
const blob = new Blob([notepad.value], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '记事本内容.txt';
a.click();
URL.revokeObjectURL(url);
});添加自动保存功能 实现定时自动保存功能。
// 自动保存间隔(毫秒)
const AUTO_SAVE_INTERVAL = 30000;
setInterval(() => {
if(notepad.value.trim() !== '') {
localStorage.setItem('notepadContent', notepad.value);
console.log('内容已自动保存');
}
}, AUTO_SAVE_INTERVAL);注意事项
- 本地存储有大小限制(通常5MB)，不适合存储大量内容
- 考虑添加内容变化检测，避免不必要的自动保存
- 可以添加Markdown支持等高级功能增强实用性
- 对于更复杂的需求，可以考虑使用IndexedDB代替localStorage
