|
用JavaScript实现一个简易的todolist.
在codepen上调试
在线预览
界面布局
界面布局这里使用tailwindcss框架
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="src/tailwind.css" rel="stylesheet">
</head>
<body class="grid grid-cols-5 gap-1">
<div class="sm:col-start-2 sm:col-span-3 col-start-1 col-span-5">
<h1 class="text-blue-200 text-left text-4xl font-mono mt-3">ToDo List</h1>
<!--add item-->
<div>
<input id="input" class="mt-3 focus:outline-none ring
outline-none rounded font-thin h-6 w-full " />
<button id="add"
class="mt-3 bg-transparent hover:bg-blue-200 text-blue-400 hover:text-white py-2 px-4 border border-blue-200 hover:border-transparent rounded">
add
</button>
</div>
<!--list-->
<div class="w-full rounded-lg shadow-lg ">
<ul id="list"></ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
思路
维护一个事项数组listArray,
添加事项时，使用push方法将该事项加到数组中；
删除事项时，时用filter方法将数组中要删除的id的事项过滤掉；
修改事项状态时，如果该事项为待办状态，使用reduce方法，
将listArray数组通过id将该事项状态切换为完成状态，其他事项不变，
完成状态切换成待办状态同理。
每个操作最后将listArray的元素渲染出来。
//获取dom元素
const add = document.getElementById('add'),
list = document.getElementById('list'),
input = document.getElementById('input');
// 事项数组
let listArray = [];
//每个事项的唯一标识
let identity = 0;
未完成事项状态
function notDoneItem(id,content) {
return {
id : id,
content : content,
elem :
`<li class="flex items-center justify-between p-3 mt-2 bg-blue-100" id=${id}>
<input type="checkbox" onclick="itemIsDone(${id})" id="input${id}">
<label for="input${id}"><p id="p${id}">${content}</p></label>
<button
class="bg-transparent hover:bg-red-300 text-red-700 hover:text-white py-2 px-4 border border-red-300 hover:border-transparent rounded"
onclick="deleteItem(${id++})">
delete
</button>
</li>`,
};
}
已完成事项状态
function isDoneItem(id,content){
return {
id : id,
content : content,
elem :
`<li class="flex items-center justify-between p-3 mt-2 bg-green-100" id=${id}>
<input type="checkbox" onclick="itemNotDone(${id})" checked="true" id="input${id}">
<label for="input${id}"><p id="p${id}" class="line-through">${content}</p></label>
<button
class="bg-transparent hover:bg-red-300 text-red-700 hover:text-white py-2 px-4 border border-red-300 hover:border-transparent rounded"
onclick="deleteItem(${id++})">
delete
</button>
</li><label for=${id}></label>`,
};
}
将数组listArray中的元素渲染出来
function showListItem() {
list.innerHTML = '';
return listArray.forEach(item => {
list.innerHTML += item.elem;
})
}
添加事项
add.addEventListener('click', () => {
if (input.value.trim()) {
listArray.push(notDoneItem(identity++,input.value.trim()));
showListItem();
input.value = '';
}
})
删除事项
function deleteItem(index) {
listArray = listArray.filter(item => {
return item.id != index;
})
if (listArray.length === 0) {
identity = 0;
}
showListItem();
}
事项状态切换
function itemIsDone(index) {
listArray = listArray.reduce((arrlist,cur) => {
if (cur.id === index){
arrlist.push(isDoneItem(cur.id,cur.content));
}else{
arrlist.push(cur);
}
return arrlist;
},[]);
showListItem();
}
function itemNotDone(index) {
listArray = listArray.reduce((arrlist,cur) => {
if (cur.id === index){
arrlist.push(notDoneItem(cur.id,cur.content));
}else{
arrlist.push(cur);
}
return arrlist;
},[]);
showListItem();
}
|