AI 设计在线记事本，可以临时使用。附制作思路和原始代码，需要的可以参考。
前情概要
以前我使用过的在线记事本，都是将对应的网址嵌入到本博客中来使用。20250318，心血来潮给 DeepSeek 指令发送指令，“给我设计一套在线记事本的代码，要求能嵌入博客中，HTML,CSS,JS”，就这样简单的一句话，不到 2 分钟，一套完整的网页版代码就到手了。第二次添加修正指令“在上述代码中添加待办事项的功能”。第三次添加修正指令“修正一下，让输入框有个最小宽度和高度”。
✍️ 对上述代码做简单的修改，嵌入我的博客中，得到的软件效果如下：
在线记事本
临时记事 待办事项
保存 清空全部
- 测试了这个在线临时记事本，感觉挺好用的，不足之处是浏览器一旦清理了缓存，这些笔记就不见了。
原始代码
临时在线笔记的原始代码展示
<style>
.editor-area {
width: 100%;
min-width: 300px; /* 新增最小宽度 */
height: 400px;
min-height: 150px; /* 新增最小高度 */
padding: 15px;
border: none;
resize: vertical; /* 允许垂直调整 */
font-size: 14px;
line-height: 1.6;
background: #f9f9f9;
box-sizing: border-box; /* 确保padding不影响尺寸 */
}
/* 容器添加最小宽度限制 */
.notepad-container {
width: 100%;
max-width: 800px;
min-width: 640px; /* 新增容器最小宽度 */
margin: 20px auto;
font-family: Arial, sans-serif;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.tab-bar {
display: flex;
background: #f5f5f5;
border-bottom: 1px solid #eee;
}
.tab-button {
flex: 1;
padding: 12px;
border: none;
background: transparent;
cursor: pointer;
font-size:18px;
transition: 0.3s;
}
tab-button active{
background: #fff;
}
.tab-button.active {
background: #fff;
font-weight: bold;
}
/* 新增待办事项样式 */
.todo-item {
display: flex;
align-items: center;
padding: 8px;
margin: 5px 0;
background: #f8f8f8;
border-radius: 4px;
}
.todo-checkbox {
margin-right: 10px;
}
.completed {
text-decoration: line-through;
opacity: 0.7;
}
</style>
<div >
<div >
<button onclick="switchTab('notes')">临时记事</button>
<button onclick="switchTab('todos')">待办事项</button>
</div>
<textarea placeholder="输入内容..."></textarea>
<div >
<button onclick="saveContent()">保存</button>
<button onclick="deleteAll()">清空全部</button>
</div>
<div ></div>
</div>
<script>
let currentTab = 'notes'; // 当前激活的选项卡
function switchTab(tab) {
currentTab = tab;
document.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.toggle('active', btn.textContent.includes(tab === 'notes' ? '笔记' : '待办事项'));
});
document.getElementById('editor').placeholder = tab === 'notes'
? '输入您的笔记...'
: '输入待办事项...';
loadContent();
}
function saveContent() {
const content = document.getElementById('editor').value.trim();
if (!content) return;
const item = {
id: Date.now(),
type: currentTab,
content: content,
date: new Date().toLocaleString(),
completed: false // 待办事项专用属性
};
let items = JSON.parse(localStorage.getItem('items') || '[]');
items.push(item);
localStorage.setItem('items', JSON.stringify(items));
document.getElementById('editor').value = '';
loadContent();
}
function loadContent() {
const items = JSON.parse(localStorage.getItem('items') || '[]');
const list = document.getElementById('contentList');
list.innerHTML = '';
items.filter(item => item.type === currentTab).forEach(item => {
const div = document.createElement('div');
if (currentTab === 'todos') {
// 待办事项模板
div.className = 'todo-item';
div.innerHTML = `
<input type="checkbox" ${item.completed ? 'checked' : ''}
onchange="toggleTodo(${item.id}, this.checked)">
<span completed' : ''}">${item.content}</span>
<button onclick="deleteItem(${item.id})" >删除</button>
`;
} else {
// 笔记模板
div.className = 'note-item';
div.innerHTML = `
<span>${item.date}</span>
<button onclick="deleteItem(${item.id})" >删除</button>
`;
div.addEventListener('click', () => showContent(item.id));
}
list.appendChild(div);
});
}
function toggleTodo(id, completed) {
let items = JSON.parse(localStorage.getItem('items') || '[]');
const index = items.findIndex(item => item.id === id);
if (index > -1) {
items[index].completed = completed;
localStorage.setItem('items', JSON.stringify(items));
}
loadContent();
}
function showContent(id) {
if (currentTab !== 'notes') return;
const items = JSON.parse(localStorage.getItem('items') || '[]');
const item = items.find(n => n.id === id);
if (item) {
document.getElementById('editor').value = item.content;
}
}
function deleteItem(id) {
if (!confirm('确定要删除吗？')) return;
let items = JSON.parse(localStorage.getItem('items') || '[]');
items = items.filter(n => n.id !== id);
localStorage.setItem('items', JSON.stringify(items));
loadContent();
}
function deleteAll() {
if (!confirm('确定要清空全部内容吗？')) return;
let items = JSON.parse(localStorage.getItem('items') || '[]');
items = items.filter(item => item.type !== currentTab);
localStorage.setItem('items', JSON.stringify(items));
loadContent();
}
window.onload = function() {
loadContent();
}
</script>原始代码的使用方法：①若 AI 生成了三个文件，index.html,styles.css,script.js，可以将这三个文件放置在你的电脑的本地的同一个文件夹中，通过双击index.html，用浏览器打开就可以运行；②还可以告诉 AI 将以上的三个文件打包保存为你的电脑的本地的一个 index.html 文件，双击index.html，用浏览器打开就可以运行；③我的用法是将以上的代码嵌入到我的博客中使用，有一定的难度，主要是涉及和本博客的主题定制有关，有时候的复制粘贴就会出错，需要修正，挺费事的。④我给 AI 的要求是用前端语言来设计，故涉及 html、css、js 语言，我们还可以让 AI 涉及为其他的语言形式，这个我弄不了，只是记录个思路而已。
在线笔记
①. 可以添加密码的在线笔记本，能将内容保存在网络上，换个电脑也能使用。
②. 不添加密码的在线笔记本，能将内容保存在网络上，换个电脑也能使用。
