<div>
<div class="menu">
<div class="item">
<input type="text" value="" placeholder="请输入内容" class="inp1">
<span class="btn1">增加</span>
</div>
<p>未完成事项</p>
<div class="item1"></div>
<P>完成事项</P>
<div class="item2"></div>
</div>
</div>
<script src="jquery-3.5.0.min.js"></script>
<script>
let inp1 = $(".inp1")
let btn1 = $(".btn1");
let item1 = $(".item1");
let item2 = $(".item2");
$(function () {
let todoList = JSON.parse(localStorage.getItem("todoList"));
if (!todoList) {
todoList = [];
}
todoList.forEach(item => {
let newLi = $(`<div class='unfinished'><span>${item}</span> <button class='btn2'>删除</button>
<button class='btn3'>完成</button></div>`)
item1.append(newLi)
});
let doneList = JSON.parse(localStorage.getItem("doneList"))
if (!doneList) {
doneList = [];
}
doneList.forEach(item => {
let newLi2 = $(
`<div class="finished"><span>${item}</span><button class='btn4'>删除</button></div>`
);
item2.append(newLi2);
})
btn1.on("click", function (e) {
let unfinishInp1 = inp1.val().trim();
if (unfinishInp1 == "") {
alert("请输入代办事项");
inp1.val("")
return;
}
if (todoList.indexOf(unfinishInp1) >= 0) {
alert("请输入不同的内容");
inp1.val("")
return
}
todoList.push(unfinishInp1);
localStorage.setItem("todoList", JSON.stringify(todoList));
let newLi = $(`<div class='unfinished'><span>${unfinishInp1}</span> <button class='btn2'>删除</button>
<button class='btn3'>完成</button></div>`)
item1.append(newLi)
inp1.val("");
});
item1.on("click", ".btn2", function (e) {
let str3 = $(e.target).parent().find("span").val().trim();
let index1 = todoList.indexOf(str3);
todoList.splice(index1, 1);
$(e.target).parent().remove();
localStorage.setItem("todoList", JSON.stringify(todoList));
})
item1.on("click", ".btn3", function (e) {
let str = $(e.target).parent().find("span").html();
let newLi2 = $(
`<div class="finished"><span>${str}</span><button class='btn4'>删除</button></div>`
);
let index = todoList.indexOf(str);
todoList.splice(index, 1);
localStorage.setItem("todoList", JSON.stringify(todoList));
doneList.push(str);
localStorage.setItem("doneList", JSON.stringify(doneList));
$(e.target).parent().remove();
item2.append(newLi2);
})
item2.on("click", ".btn4", function (e) {
let str1 = $(e.target).parent().find("span").val().trim();
let index2 = doneList.indexOf(str1);
doneList.splice(index2, 1);
$(e.target).parent().remove();
localStorage.setItem("doneList", JSON.stringify(doneList));
})
})
</script>
样式
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.item {
background-color: antiquewhite;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.item .inp1 {
height: 30px;
line-height: 30px;
}
.item .btn1 {
height: 30px;
width: 60px;
line-height: 30px;
text-align: center;
background-color: yellow;
cursor: pointer;
border-radius: 10%;
color: blue;
}
.menu {
width: 300px;
margin: 0 auto;
background-color: aqua;
}
.unfinished {
height: 40px;
line-height: 40px;
}
.unfinished span {
float: left;
}
.unfinished .btn2,
.unfinished .btn3 {
float: right;
margin-top: 10px;
}
.finished {
height: 40px;
line-height: 40px;
}
.finished .btn4 {
float: right;
margin-top: 10px;
}
.finished span {
text-decoration: line-through;
}
</style>