html简单列表便笺

dada02

html简单列表便笺

【便笺软件很多，有论坛单列式的，有日历式的，也有博客式的，突出奇想，做个多列式带预览的，对于较多数据有点一览众山小的感觉，数据多了不好说，但至少一次能看到前几十个还是能满足需要的，多点乐趣，也是有意义的事】

软件功能截图

功能介绍

数据存储：本地存储，indexedDb数据库，可数据导入/导出
搜索数据：标题或内容搜索，按完成状态筛选
新建编辑：可创建、编辑、删除便笺（右侧预览窗口），支持Markdown语法
显示方式：分页显示（每页30条数据），左边的多列便笺，右侧为预览，支持放大显示（放大按钮）
任务处理：支持便笺完成状态标记

关键代码

// 渲染便笺项（三列布局）
pageMemos.forEach((memo, index) => {
        const memoElement = document.createElement('div');
        memoElement.className = `memo-item ${memo.completed ? 'completed' : ''} ${state.currentMemo && state.currentMemo.id === memo.id ? 'active' : ''}`;
        memoElement.dataset.id = memo.id;

        // 格式化日期
        const createDate = formatDate(memo.date);
        const reminderDate = memo.reminderDate ? '到期日期：'+formatDate(memo.reminderDate) : '';
        const reminderIcon = memo.reminderDate ? 
                `<i class="fas fa-bell memo-item-reminder" title="有提醒"></i>` : '';

        // 创建标签（根据内容类型）
        let tag = '';
        if (memo.content.includes('# ')) tag = '笔记';
        else if (memo.content.includes('- [ ]')) tag = '待办';
        else if (memo.content.includes('http')) tag = '链接';

        // 计算当前序号
        const itemNumber = startNumber + index;

        memoElement.innerHTML = `
                <div class="memo-item-header">
                        <div class="memo-item-index">${itemNumber}.</div>
                        ${reminderIcon}
                        <div class="memo-item-title" title="${memo.title}">${memo.title}</div>
                </div>
                <div class="memo-item-footer">
                        <div class="memo-item-date">${createDate} ${reminderDate}</div>
                        ${tag ? `<div class="memo-item-tag">${tag}</div>` : ''}
                </div>
        `;
        ...

附件

简单列表便笺html.zip，解压到文件夹，双击html文件浏览器打开使用

欢迎试用

jxsdxxf

可以配置成连接mysql数据库，使用相应的用户名密码登陆，每个人都可以在内网中任意电脑登录使用浏览器管理自己的内容吗？？你这个只能在同一个电脑的浏览器上使用吧。

Herafe

😓点一下，就扣吾爱币的，不过感谢楼主分享

dada02

Herafe 发表于 2026-1-24 10:25
😓点一下，就扣吾爱币的，不过感谢楼主分享

嗯，回复一下CB就回来了

Chao5337

哈哈哈 试用了一下，还真不错，谢谢楼主

fkqv

很好很好，试用一下，楼主是用AI写的吗

ysjd22

非常的nice，部署到服务器上用挺不错

flyer_2001

ysjd22 发表于 2026-1-24 11:02
非常的nice，部署到服务器上用挺不错

本地存储的，服务器不适用，服务器版要修改

dada02

fkqv 发表于 2026-1-24 10:57
很好很好，试用一下，楼主是用AI写的吗

基础代码可以ai，优化需要手动联调，比如黄金分割布局、字体大小微调等

wvip

哈哈，不是你撞的你扶，就是你撞的

soooven

不错，真是用AI 写的吗？