用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();
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298389.html
標籤：其他