先看下效果：
文章图片
文章图片
文章图片
载体就是一个网页，用html，css和JavaScript实现一个简单的便签系统。
动画效果用的是animation.css库，缓存用的localStorage。
【一些零碎代码|几十行代码，打造一款JavaScript便签系统】除非手动清空便签，否则便签会一直保留，非常方便。
文章图片
鼠标右键可以点开菜单。
代码：
WEBQQ桌面级便签系统 - 锐客网
*{margin:0;
padding:0;
}
body{background:url("images/bg.jpg");
background-size:cover;
font-size:12px;
font-family:"微软雅黑";
color:#666;
}/*menu start*/
.menu{width:200px;
background:#fff;
display:none;
position:absolute;
left:0;
top:0;
z-index:1;
}
.menu ul li{border-bottom:1px solid #F3F3F3;
list-style:none;
line-height:36px;
font-size:14px;
padding-left:15px;
}
.menu ul li:hover{background:#647E7C;
color:#fff;
}
/*end menu*/#test{font-size:24px;
color:#fff;
}/*box start*/
.box{position:relative;
}
.box .b_list{width:294px;
height:310px;
position:absolute;
}
.box .b_list .b_content{width:256px;
height:220px;
position:absolute;
top:60px;
left:16px;
outline: none;
font-size:18px;
}
.box .timer{position:absolute;
bottom:10px;
right:20px;
font-size:14px;
}
/*end box*/
- 新建文件夹
- 添加mini便签
- 清空便签
- 刷新
- 上传资料
- 更换背景
- 注销
下载：JavaScript实现桌面级便签系统-Javascript文档类资源-CSDN下载
推荐阅读
- 前端面试题|深拷贝和浅拷贝
- 一些零碎代码|适用于eclipse的codetemplate.xml
- Javascript|前端js面试会问到的浅拷贝和深拷贝（以浅拷贝为例）
- #|《Effective Modern C++》学习笔记 - Item 29: 移动操作的“坑点”（它们可能不存在，开销不小或不会被调用）
- Java基础总结|Java期末复习速成（七）
- Java基础总结|Java期末复习速成（六）
- Java毕设项目|基于JavaScript+html5的家教小程序的设计与实现
- Javascript|JavaScript权威指南7(四) 第十一章 JavaScript 标准库
- java|Java基础总结