前幾天發了兩篇關於本地存儲和實現簡單備忘錄的兩篇文章，但是那個備忘錄一刷新頁面或關掉瀏覽器再打開數據就不見了，那爲何不把它倆結合一下，做一個不會丟失數據的web備忘錄呢。所以，升級版2.0他來了！！！
實現功能：
- 實現備忘功能
- 自動獲取添加備忘時間
- 自動統計已完成和未完成事件的數量
- 勾選複選框，相應的事件會到已完成列表
- 取消複選框，相應的事件會到未完成列表
- 點擊X號，響應的事件刪除
- 點擊添加備忘按鈕，輸入框自動清空
- 刷新頁面或關閉瀏覽器，數據不會丟失（除非清理瀏覽器緩存）
實現效果：
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>備忘錄</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="js/jQuery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="header">
<input type="text" placeholder="添加備忘事件" id="in">
<button class="btn btn-success">添加備忘</button>
</div>
<div class="con">
<div class="weiwancheng">
<p>未完成<i class="weicount">1</i></p>
<ul>
<li>
</li>
</ul>
</div>
<div class="yiwancheng">
<p>已完成<i class="yicount"></i></p>
<ul>
</ul>
</div>
</div>
</body>
</html>
css文件：
* {
margin: 0;
padding: 0;
outline: none!important;
}
html {
height: 100%;
}
body {
height: 100%;
background-image: -webkit-linear-gradient(left,#fbc2eb, #a6c1ee);
}
.header {
width: 500px;
height: 42px;
margin: 10px auto;
text-align: center;
}
.header input {
width: 300px;
height: 40px;
border: 0;
border-radius: 10px;
padding: 0 10px;
}
.header button {
height: 40px;
margin-left: 10px;
border: 0;
}
.weiwancheng,
.yiwancheng {
width: 600px;
margin: 10px auto;
}
.weicount,
.yicount {
height: 20px;
width: 20px;
border: 0;
margin-left: 20px;
padding: 5px 8px 5px 8px;
background-color: #fff;
border-radius: 50%;
}
.weiwancheng ul,
.yiwancheng ul {
width: 100%;
}
.weiwancheng ul li,
.yiwancheng ul li {
padding-left: 10px;
display: flex;
align-items: center;
list-style: none;
line-height: 30px;
width: 100%;
margin-top: 10px;
border: 0;
border-radius: 10px;
background-color: aqua;
}
.yiwancheng ul li {
background-color: #a6c1ee;
}
.content {
display: inline-block;
width: 400px;
word-wrap:break-word;
margin: 0!important;
padding: 0 10px;
}
.weiwancheng ul li em,
.yiwancheng ul li em {
margin-left: 20px;
cursor: pointer;
height: 14px;
width: 14px;
}
.weiwancheng ul li input,
.yiwancheng ul li input {
margin-top: 0;
height: 20px;
width: 20px;
}
js文件：
$(function () {
load();
$(".btn").on("click", function () {
if($("#in").val()==''){
alert('備忘不能爲空！')
}else{
function getNow(s) {
return s < 10 ? '0' + s : s;
}
var myDate = new Date();
var year = myDate.getFullYear(); //獲取當前年
var month = myDate.getMonth() + 1; //獲取當前月
var date = myDate.getDate(); //獲取當前日
var h = myDate.getHours(); //獲取當前小時數(0-23)
var m = myDate.getMinutes(); //獲取當前分鐘數(0-59)
var s = myDate.getSeconds();
var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
var local = getDate();
console.log(local);
local.push({title:$("#in").val(),time:now,done:false});
saveDate(local);
load();
$("#in").val('');
}
});
$(".weiwancheng ul,.yiwancheng ul").on("click","em",function(){
var data=getDate();
var index=$(this).attr("index");
data.splice(index,1);
saveDate(data);
load();
});
$(".weiwancheng ul,.yiwancheng ul").on("click","input",function(){
var data=getDate();
var index=$(this).siblings("em").attr("index");
data[index].done=$(this).prop("checked");
saveDate(data);
load();
});
function saveDate(data){
localStorage.setItem("todolist",JSON.stringify(data))
}
function load(){
var data=getDate();
$(".weiwancheng ul,.yiwancheng ul").empty();
var todocount=0;
var donecount=0;
$.each(data,function(i,n){
if(n.done){
donecount++;
$(".yiwancheng ul").prepend("<li><input type='checkbox' checked='checked'><p class='content'>"+n.title+"</p><span>"+n.time+"</span><em index="+i+" class='glyphicon glyphicon-remove'></em></li>")
}else{
todocount++;
$(".weiwancheng ul").prepend("<li><input type='checkbox'><p class='content'>"+n.title+"</p><span>"+n.time+"</span><em index="+i+" class='glyphicon glyphicon-remove'></em></li>")
}
});
$(".weicount").text(todocount);
$(".yicount").text(donecount);
}
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data);
} else {
return [];
}
}
})
有計劃的規劃自己的生活是成功路上的必修課，so，此備忘錄你值得擁有！！！