一些零碎代码|几十行代码,打造一款JavaScript便签系统

先看下效果:
一些零碎代码|几十行代码,打造一款JavaScript便签系统
文章图片

一些零碎代码|几十行代码,打造一款JavaScript便签系统
文章图片

一些零碎代码|几十行代码,打造一款JavaScript便签系统
文章图片

载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统。
动画效果用的是animation.css库,缓存用的localStorage。
【一些零碎代码|几十行代码,打造一款JavaScript便签系统】除非手动清空便签,否则便签会一直保留,非常方便。
一些零碎代码|几十行代码,打造一款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下载

    推荐阅读