diff --git "a/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.css" "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.css"
new file mode 100644
index 0000000..d0453d4
--- /dev/null
+++ "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.css"
@@ -0,0 +1,51 @@
+/* reset */
+html, body, h1, h2, h3, h4, h5, h6, div, ul, li, p, form, label, input, button, img {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+table, th, td, thead, tbody {
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-size: 100%;
+ font-weight: normal;
+}
+
+a {
+ text-decoration: none;
+ cursor: pointer;
+ color: #000;
+}
+
+button {
+ -ms-box-sizing: content-box;
+ box-sizing: content-box;
+ cursor: pointer;
+}
+
+body, input, button {
+ font: 12px/1.14 'Microsoft YaHei';
+ outline: 0;
+ color: #000;
+}
+
+.clearfix:before,.clearfix:after{
+ content:'·';
+ height: 0;
+ display: block;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.clearfix{
+ zoom:1;
+}
\ No newline at end of file
diff --git "a/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.html" "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.html"
new file mode 100644
index 0000000..db0d7fc
--- /dev/null
+++ "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.html"
@@ -0,0 +1,60 @@
+
+
+
+
+
+ 完整结构
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.js" "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.js"
new file mode 100644
index 0000000..4a37fc9
--- /dev/null
+++ "b/00\346\226\207\344\273\266\345\237\272\347\241\200\347\273\223\346\236\204/index.js"
@@ -0,0 +1,80 @@
+/*下面是常用的封装好的几个方法*/
+
+/*发送请求*/
+function ajax(url, success, fail) {
+ var xhr = null;
+ if (window.XMLHttpRequest) {
+ xhr = new XMLHttpRequest();
+ } else {
+ xhr = new ActiveXObject("Microsoft.XMLHTTP");
+ }
+ xhr.open("GET", url, false);
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState == 4) {
+ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
+ success(xhr.responseText);
+ } else {
+ fail(xhr.status);
+ }
+ }
+ }
+}
+
+/*绑定事件*/
+function addEvent(element, type, handler) {
+ if (element.addEventListener) {
+ element.addEventListener(type, handler, false);
+ } else if (element.attachEvent) {
+ element.attachEvent("on" + type, handler);
+ } else {
+ element["on" + type] = handler;
+ }
+}
+
+/*添加class*/
+function addClass(element, newClass) {
+ var className = element.className;
+ if (!className) {
+ element.className = newClass;
+ } else {
+ if (className.indexOf(newClass) === -1) {
+ className = className + " ";
+ className += newClass;
+ element.className = className;
+ }
+ }
+
+}
+
+/*移除class*/
+function removeClass(element, newClass) {
+ var className = element.className;
+ if (className.indexOf(newClass) > -1) {
+ var reg = new RegExp("\s*" + newClass + "\s*", "gi");
+ className = className.replace(reg, " ");
+ element.className = className;
+ }
+}
+
+/*查找是否有该class*/
+function hasClass(element, cls) {
+ var className = element.className;
+ if (className.indexOf(cls) > -1) {
+ return true;
+ }
+ return false;
+}
+
+/*按id获取该元素*/
+function $(id) {
+ return document.getElementById(id);
+}
+
+/*获取样式*/
+function getStyle(element) {
+ if (window.getComputedStyle) {
+ return window.getComputedStyle(element);
+ } else if (element.currentStyle) {
+ return element.currentStyle;
+ }
+}
\ No newline at end of file
diff --git "a/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/imgs/close.png" "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/imgs/close.png"
new file mode 100644
index 0000000..8b6c3ec
Binary files /dev/null and "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/imgs/close.png" differ
diff --git "a/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.html" "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.html"
new file mode 100644
index 0000000..6639996
--- /dev/null
+++ "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.html"
@@ -0,0 +1,23 @@
+
+
+
+
+ 简易网页便筏系统
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.js" "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.js"
new file mode 100644
index 0000000..36bb694
--- /dev/null
+++ "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/index.js"
@@ -0,0 +1,217 @@
+var note = {
+ util: {}, //存放基础工具的方法
+ operate: {} //存放便筏相关的操作
+};
+
+note.util = {
+ $: function (value, node) {
+ return (node || document).querySelector(value);
+ },
+ dateFormat: function (ms) {
+ /*格式化时间*/
+ var d = new Date(ms);
+ var pad = function (s) {
+ if (s.toString().length === 1) {
+ s = '0' + s;
+ }
+ return s;
+ }
+ var year = d.getFullYear();
+ var month = d.getMonth() + 1;
+ var date = d.getDate();
+
+ var hour = d.getHours();
+ var minute = d.getMinutes();
+ var second = d.getSeconds();
+
+ return year + '-' + pad(month) + '-' + pad(date) + ' ' + pad(hour) + ':' + pad(minute) + ':' + pad(second);
+ }
+};
+
+note.operate = {
+ /*本地存储的关键字*/
+ keyItem: 'stickyNote',
+
+ /*根据便筏的id来获取note*/
+ get: function (id) {
+ var notes = this.getNotes();
+ return notes[id] || {};
+ },
+
+ /*设置一个note的id及其内容*/
+ set: function (id, content) {
+ var notes = this.getNotes();
+ if (notes[id]) {
+ Object.assign(notes[id], content);
+ } else {
+ notes[id] = content;
+ }
+ localStorage[this.__store_key] = JSON.stringify(notes);
+ console.log('saved note: id: ' + id + ' content: ' + JSON.stringify(notes[id]));
+ },
+
+ /*根据id删除对应的便筏*/
+ remove: function (id) {
+ var notes = this.getNotes();
+ delete notes[id];
+ localStorage[this.stickyNote] = JSON.stringify(notes);
+
+ },
+
+ /*获取localStorage中所有的note*/
+ getNotes: function () {
+ return JSON.parse(localStorage[this.stickyNote] || '{}');
+ }
+};
+
+/*创建note*/
+(function (util, operate) {
+ var $ = util.$;
+ var movedNote = null;
+ var startX;
+ var startY;
+ var maxZindex = 0;
+
+ var noteTmplate = `
+
+ 便筏
+
+
+ 更新时间：
+
+
+ `;
+
+ function Note(options) {
+ var note = document.createElement('div');
+ note.className = 'm-note';
+ note.id = options.id || 'm-note-' + Date.now();
+ note.innerHTML = noteTmplate;
+ $('.u-edit', note).innerHTML = options.content || '';
+ note.style.left = options.left + 'px';
+ note.style.top = options.top + 'px';
+ note.style.zIndex = options.maxZindex;
+ document.body.appendChild(note);
+ this.note = note;
+ this.updateTime(options.updateTime);
+ this.addEvent();
+ }
+
+ /*时间更新方法*/
+ Note.prototype.updateTime = function (ms) {
+ var ts = $('.time', this.note);
+ ms = ms || Date.now();
+ ts.innerHTML = util.dateFormat(ms);
+ this.updateTimeInMs = ms;
+ }
+
+ /*便筏保存*/
+ Note.prototype.save = function () {
+ operate.set(this.note.id, {
+ left: this.note.offsetLeft,
+ top: this.note.offsetTop,
+ zIndex: parseInt(this.note.style.zIndex),
+ content: $('.u-edit', this.note).innerHTML,
+ updateTime: this.updateTimeInMS
+ });
+ console.log('note saved');
+ }
+
+ /*删除此便筏*/
+ Note.prototype.close = function (e) {
+ console.log('close note');
+ document.body.removeChild(this.note);
+ }
+
+ Note.prototype.addEvent = function () {
+ var mousedownHandler = function (e) {
+ movedNote = this.note;
+ startX = e.clientX - this.note.offsetLeft;
+ startY = e.clientY - this.note.offsetTop;
+ if (parseInt(this.note.style.zIndex) !== maxZindex - 1) {
+ this.note.style.zIndex = maxZindex++;
+ operate.set(this.note.id, {
+ zIndex: maxZindex - 1
+ });
+ }
+ }.bind(this);
+
+ this.note.addEventListener('mousedown', mousedownHandler);
+
+ var edit = $('.u-edit', this.note);
+ var inputTimer;
+ var inputHandler = function (e) {
+ var content = edit.innerHTML;
+ clearTimeout(inputTimer);
+ inputTimer = setTimeout(function () {
+ var time = Date.now();
+ operate.set(this.note.id, {
+ content: content,
+ updateTime: time
+ });
+ this.updateTime(time);
+ }.bind(this), 300);
+ }.bind(this);
+
+ edit.addEventListener('input', inputHandler);
+
+ var closeBtn = $('.u-close', this.note);
+ var closeHandler = function (e) {
+ operate.remove(this.note.id);
+ this.close(e);
+ closeBtn.removeEventListener('click', closeHandler);
+ this.note.removeEventListener('mousedown', mousedownHandler);
+ }.bind(this);
+
+ closeBtn.addEventListener('click', closeHandler);
+ }
+
+
+ /*按钮的监听事件*/
+ document.addEventListener('DOMContentLoaded', function (e) {
+ $('#u-btn-create').addEventListener('click', function (e) {
+ var note = new Note({
+ left: Math.round(Math.random() * (window.innerWidth - 220)),
+ top: Math.round(Math.random() * (window.innerHeight - 320)),
+ zIndex: maxZindex++
+ });
+ note.save();
+ });
+
+ /*按钮的按下事件*/
+ function mousemoveHandler(e) {
+ // console.log(e)e
+ if (!movedNote) {
+ return;
+ }
+ movedNote.style.left = e.clientX - startX + 'px';
+ movedNote.style.top = e.clientY - startY + 'px';
+ }
+
+ function mouseupHandler(e) {
+ if (!movedNote) {
+ return;
+ }
+ operate.set(movedNote.id, {
+ left: movedNote.offsetLeft,
+ top: movedNote.offsetTop
+ });
+ movedNote = null;
+ }
+ document.addEventListener('mousemove', mousemoveHandler);
+ document.addEventListener('mouseup', mouseupHandler);
+
+ /*初始化*/
+ var notes = operate.getNotes();
+ Object.keys(notes).forEach(function (id) {
+ var options = notes[id];
+ if (maxZindex < options.zIndex) {
+ maxZindex = options.zIndex;
+ }
+ new Note(Object.assign(options, {
+ id: id
+ }));
+ maxZindex += 1;
+ })
+ });
+})(this.note.util, this.note.operate);
\ No newline at end of file
diff --git "a/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/style.css" "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/style.css"
new file mode 100644
index 0000000..f20b8a6
--- /dev/null
+++ "b/09\347\275\221\351\241\265\347\211\210\344\276\277\347\255\217\347\263\273\347\273\237/style.css"
@@ -0,0 +1,68 @@
+#u-btn-create{
+ width: 100px;
+ height: 40px;
+ border-radius: 4px;
+ background-color: #3DB271;
+ color: #fff;
+ border: none;
+ outline: none;
+}
+
+.m-note{
+ position: relative;
+ left: 40px;
+ top: 100px;
+ width: 220px;
+ height:300px;
+ background: #99D9EA;
+ border-radius: 4px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
+}
+.m-note:hover .u-close{
+ display: inline-block;
+}
+.u-close{
+ display: none;
+ position: absolute;
+ top: -10px;
+ left: -10px;
+ width: 30px;
+ height: 30px;
+ background: url(./imgs/close.png) no-repeat;
+ background-size:26px 26px;
+}
+
+.u-edit{
+ position: relative;
+ width: 200px;
+ height: 225px;
+ padding: 10px;
+ font-size: 13px;
+ line-height: 24px;
+ outline: none;
+ overflow-y: auto;
+}
+.u-edit::-webkit-scrollbar{
+ width: 6px;
+ background-color: #ccc;
+}
+.u-edit::-webkit-scrollbar-thumb{
+ background-color: #6FBBCF;
+}
+
+.u-title{
+ height: 25px;
+ padding-left:20px;
+ border-bottom: 1px solid #A3CED9;
+}
+
+.u-timeUpdate{
+ position: absolute;
+ bottom: 0;
+ width: 210px;
+ height: 30px;
+ padding-left: 10px;
+ line-height: 30px;
+ font-size:12px;
+ background-color: #6FBBCF;
+}
\ No newline at end of file