實現功能：
- 添加備忘事件
- 自動獲取備忘時間
- 在未完成事件中點擊對號，相應的事件會走到已完成事件中
- 在已完成事件中點擊對號，相應的事件會消失
實現效果：
index.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">
<button class="btn btn-success">添加備忘</button>
</div>
<div class="con">
<div class="weiwancheng">
<p>未完成</p>
<ul>
</ul>
</div>
<div class="yiwancheng">
<p>已完成</p>
<ul>
</ul>
</div>
</div>
</body>
</html>
index.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;
}
.weiwancheng ul,
.yiwancheng ul {
width: 100%;
}
.weiwancheng ul li,
.yiwancheng ul li {
display: flex;
align-items: center;
list-style: none;
line-height: 30px;
width: 100%;
margin-top: 10px;
border: 0;
border-radius: 10px;
background-color: aqua;
}
.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;
}
index.js:
$(function () {
$(".btn").click(function () {
if ($(".header input").val() != '') {
var li = $("<li></li>");
$(".weiwancheng ul").prepend(li);
var p = $("<p></p>");
p.addClass("content");
li.append(p);
p.text($(".header input").val());
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 span = $("<span></span>");
li.append(span);
span.text(now);
var em = $("<em></em>");
em.addClass("glyphicon glyphicon-ok");
li.append(em);
$(em).click(function () {
var li = $("<li></li>");
$(".yiwancheng ul").prepend(li);
var p = $("<p></p>");
p.addClass("content");
li.append(p);
p.text($(this).siblings("p").text());
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 span = $("<span></span>");
li.append(span);
span.text(now);
var em = $("<em></em>");
em.addClass("glyphicon glyphicon-ok");
li.append(em);
$(this).parent().remove();
$(".yiwancheng ul li em").click(function () {
$(this).parent().remove();
});
});
} else {
alert('備忘不能爲空！');
}
});
})