js简单备忘录

Posted 2020-08-09

<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);
})