<section class="myMemory">

<h3 class="f-tit">记事本</h3>

<div class="myform">

<div class="formcon">

<p>标题:</p>

<input id="formTit" type="text"/>

<p>日期:</p>

<input id="formDate" type="date"/>

<p>内容:</p>

<textarea id="formCon" cols="30" rows="5"></textarea>

<button class="addBtn">添加事件<span class="add-success">添加成功</span></button>

<p>已添加提醒事件</p>

<div class="conbox">

<div class="thing">

<div class="th-head">

<h3 class="th-tit fl"></h3>

<div class="th-time fl"></div>

<span class="th-del">删除</span>

</div>

<div class="th-con">

<span class="con-list"></span>

</div>

</div>

</div>

</div>

</div>

</section>

 

/*记事本*/

.myform{

width:400px;

height:400px;

border:1px solid #fff;

margin:0 auto;

overflow:hidden;

background:#fff;

border-radius:20px;

}

.myMemory{

z-index:1000;

}

.f-tit{

color:#fff;

font-size:30px;

margin-left:45.5%;

margin-top:70px;

margin-bottom:30px;

}

.formcon{

width:100%;

height:100%;

overflow:auto;

overflow-x:hidden;

}

.myform p{

text-align:center;

font-size:20px;

padding-top:5px;

}

.myform input{

display:block;

font-size:20px;

text-align:center;

width:80%;

height:50px;

line-height:50px;

margin:0 auto;

border:1px solid #d4d4d4;

border-radius: 50px;

}

#formDate{

padding:10px 0 10px 50px;

}

#formCon{

display:block;

width:80%;

border-radius:20px;

margin:0 auto;

outline:none;

padding:6px 12px;

font-size:20px;

}

.addBtn{

display:block;

width:80%;

height:50px;

background:#E91E63;

border-radius:50px;

cursor:pointer;

margin:20px auto;

font-size:20px;

color:#fff;

position:relative;

}

.add-success{

width:50%;

position:absolute;

display:block;

height:30px;

background:#333;

top:-30px;

font-size:16px;

font-family:"微软雅黑";

text-align:center;

line-height:30px;

opacity:0.6;

filter:alpha(opacity=60);

border-radius:5px;

left:24%;

display:none;

}

.add-suc{

display:block;

}

.addBtn:hover{

background:#E90B50;

}

.formcon .conbox{

width:80%;

min-height:50px;

border-radius:20px;

border:1px solid #d4d4d4;

margin:0 auto;

padding:6px 12px;

}

.formcon .conbox .thing{

width:100%;

border-bottom:1px solid #d4d4d4;

display:none;

}

.formcon .conbox .th-head{

width:100%;

height:25px;

line-height:25px;

border-bottom:1px dashed #d4d4d4;

}

.th-tit{

float:left;

font-size:16px;

width:55%;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.th-time{

margin-left:30px;

font-size:12px;

}

.th-del{

float:right;

font-size:12px;

color:#777;

cursor:pointer;

text-decoration:line-through;

}

.myform .conbox .th-con{

width:100%;

padding:5px;

line-height:1.5;

font-family:"微软雅黑";

text-indent:1.3em;

font-size:14px;

}

.myform .conbox .th-con .con-list{

white-space:pre-wrap;

}

 

//记事本

var mesArr = localStorage.message?JSON.parse(localStorage.message) : [];

if(mesArr.length){

$(mesArr).each(function(){

var $thing = $(".thing").eq(0).clone().show();//克隆装事件的容器

$thing.find(".th-tit").html(this.title);

$thing.find(".th-time").html(this.times);

$thing.find(".th-con .con-list").html(this.fCon);

$thing.appendTo($(".conbox"));

})

}

//添加事件

$(".addBtn").click(function(){

if($("#formTit").val() && $("#formDate").val() && $("#formCon").val()){

var title = $("#formTit").val();

var times = $("#formDate").val();

var fCon = $("#formCon").val();

var $thing = $(".thing").eq(0).clone().show();

$thing.find(".th-tit").html(title);

$thing.find(".th-time").html(times);

$thing.find(".th-con .con-list").html(fCon);

$thing.appendTo($(".conbox"));

var obj = {};

obj.title = title;

obj.times = times;

obj.fCon = fCon;

mesArr.push(obj);

localStorage.message = JSON.stringify(mesArr);

$("#formTit").val("");//添加完清空输入内容

$("#formDate").val("");

$("#formCon").val("");

$(".add-success").html("添加成功").addClass("add-suc").addClass("animated fadeInUp");

setTimeout(function(){

$(".add-success").removeClass("animated fadeInUp").removeClass("add-suc")

},1400)

}

else{

$(".add-success").html("请填写完内容").addClass("add-suc").addClass("animated fadeInUp");

setTimeout(function(){

$(".add-success").removeClass("animated fadeInUp").removeClass("add-suc")

},1400)

}

})

//删除事件

$(".conbox").delegate(".th-del","click",function(){

var index = $(this).parents(".thing").index() - 1;

$(this).parents(".thing").remove();

mesArr.splice(index,1);

localStorage.message = JSON.stringify(mesArr);

})