如何制作便签墙网站（附完整代码）

一个支持拖拽、变色、自动保存的便签墙小工具，纯前端实现，无需后端。

前段时间用纯 HTML + CSS + JavaScript 做了一个便签墙页面，可以在上面随意添加、拖拽、编辑彩色便签，所有数据保存在浏览器本地。这篇文章记录一下实现思路和核心代码。

在线体验：便签墙 Demo

功能一览

  • 添加便签 — 点击加号按钮创建新便签
  • 拖拽移动 — 随意拖拽便签到任意位置
  • 颜色切换 — 每个便签可选不同颜色
  • 内容编辑 — 点击便签内容区域即可编辑文字
  • 自动保存 — 所有便签数据自动存入 localStorage，刷新不丢失
  • 响应式 — 手机端适配，平板和桌面使用体验不同

技术栈

纯前端三件套，没有任何依赖：

  • HTML5
  • CSS3（Flexbox、Grid、渐变、动画）
  • Vanilla JavaScript（ES6+）

核心实现

HTML 结构

一个画板容器 #board，所有便签卡片动态渲染。添加按钮用固定定位悬浮在右下角。

CSS 重点

网格背景 用 CSS 渐变实现，不需要额外图片：

1
2
3
4
5
body {
  background-image: linear-gradient(0deg, #eee 1px, transparent 0),
    linear-gradient(90deg, #eee 1px, transparent 0);
  background-size: 30px 30px;
}

便签卡片 用绝对定位，阴影和圆角营造质感：

1
2
3
4
5
6
7
.card {
  position: absolute;
  width: 220px;
  border-radius: 12px;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

JavaScript 核心逻辑

添加便签 创建一个新的卡片元素，随机分配颜色，插入到画板中：

1
2
3
4
5
6
7
8
function addNote(text = '新便签', color = getRandomColor()) {
  const card = document.createElement('div');
  card.className = 'card';
  card.style.background = color;
  // ... 设置位置、内容、绑定拖拽事件
  board.appendChild(card);
  saveNotes(); // 自动保存
}

拖拽功能 监听 mousedown / mousemove / mouseup，更新卡片的 left / top 值：

1
2
3
4
5
6
7
8
9
10
11
12
card.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 记录鼠标偏移量
  offsetX = e.clientX - card.offsetLeft;
  offsetY = e.clientY - card.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  card.style.left = (e.clientX - offsetX) + 'px';
  card.style.top = (e.clientY - offsetY) + 'px';
});

数据持久化 用 JSON 序列化所有便签的位置、内容、颜色，存入 localStorage：

1
2
3
4
5
6
7
8
9
10
11
12
function saveNotes() {
  const notes = [];
  document.querySelectorAll('.card').forEach(el => {
    notes.push({
      content: el.querySelector('.content').innerText,
      color: el.style.background,
      x: el.offsetLeft,
      y: el.offsetTop,
    });
  });
  localStorage.setItem('notes', JSON.stringify(notes));
}

如何自己搭建

  1. 创建一个 .html 文件
  2. 复制完整代码（见页面源码）粘贴进去
  3. 用浏览器打开即可使用

你也可以访问在线版本直接体验：便签墙 Demo

总结

这个便签墙项目的全部代码不到 300 行，很适合前端初学者练手。核心知识覆盖了 DOM 操作、事件监听、拖拽逻辑、localStorage 读写——全是日常开发最常用的技能。

如果你想在此基础上扩展，可以考虑加：

  • 便签缩放/旋转
  • 多画板支持
  • 导出为图片
  • 协同编辑（WebSocket）