背景
就想写个东西
代码（实现了一个原生To Do List）
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 50px auto;
}
.title_block {
display: flex;
justify-content: center;
}
.title_name {
height: 70px;
width: 200px;
line-height: 70px;
text-align: center;
}
.tips {
text-align: center;
font-size: 16px;
color: rgb(195, 197, 199);
font-weight: 500;
}
.block_title {
font-size: 16px;
font-weight: 550;
}
#to_be_completed {
max-height: 400px;
overflow-y: auto;
}
#finished {
max-height: 400px;
overflow-y: auto;
}
#taskInput {
width: 518px;
padding: 10px;
}
.addBtn {
height: 15px;
padding: 12px;
font-size: 14px;
font-weight: 600;
text-align: center;
background-color: gainsboro;
cursor: pointer;
border-radius: 4px;
}
.addBtn:hover {
background-color: rgb(141, 136, 136);
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
border-radius: 4px;
}
.item_content {
width: 430px;
height: 20px;
padding: 10px;
border-radius: 4px;
background-color: rgb(245, 240, 235);
cursor: pointer;
}
.strike_through {
text-decoration: line-through;
}
.item_content:hover {
background-color: rgb(245, 230, 215);
}
.wheel {
width: 50px;
height: 50px;
border: 10px solid #333;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
position: relative;
animation: rotate 2s linear infinite;
text-align: center;
line-height: 50px;
font-size: 30px;
font-family: cursive;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title_block">
<div class="wheel">
彭
</div>
<div class="title_name">
To-Do List
</div>
</h1>
<p class="tips">希望小彭写下的每一件事都是出于效率考虑,而不是做不完。</p>
<div>
<p class="block_title">添加待办事项</p>
<div>
<input id="taskInput" type="text" placeholder="输入文字"/>
<span class="addBtn" onclick="addTask()">添加</span>
</div>
</div>
<div>
<p class="block_title">待完成事项</p>
<div id="to_be_completed"></div>
</div>
<div>
<p class="block_title">已完成事项</p>
<div id="finished"></div>
</div>
</div>
<script>
// 数据源 待完成事件 已完成时间
var doingData = []
var doneData = []
// 获取输入框和任务列表元素
const taskInput = document.getElementById('taskInput')
const ingList = document.getElementById('to_be_completed')
const doneList = document.getElementById('finished')
// 在页面加载完成后执行代码
window.onload = function() {
// 获取初始数据
doingData = JSON.parse(localStorage.getItem("doingList")) || []
doneData = JSON.parse(localStorage.getItem("doneList")) || []
// 循环生成 DOM 元素
for (var i = 0; i < doingData.length; i++) {
// 创建新的元素
var element = document.createElement('div')
element.key = doingData[i].id
element.title = doingData[i].content
element.innerHTML = `
<div class="item">
<div class="item_content">${doingData[i].content}</div>
<div>
<span class="addBtn" onclick="completionEvent(${doingData[i].id})">已完成</span>
<span class="addBtn" onclick="removeIngTask(${doingData[i].id})">删除</span>
</div>
</div>
`;
// 将元素添加到容器中
ingList.appendChild(element);
}
for (var i = 0; i < doneData.length; i++) {
// 创建新的元素
var element = document.createElement('div')
element.key = doneData[i].id
element.title = doneData[i].content
element.innerHTML = `
<div class="item">
<div class="item_content strike_through">${doneData[i].content}</div>
<div>
<span class="addBtn" onclick="removeDoneTask(${doneData[i].id})">删除</span>
</div>
</div>
`;
// 将元素添加到容器中
doneList.appendChild(element);
}
}
// 添加任务
function addTask() {
const taskText = taskInput.value.trim()
const uniqueId = new Date().getTime()
if (taskText !== '') {
doingData.push({
content:taskText,
id:uniqueId
})
localStorage.setItem("doingList", JSON.stringify([...doingData]))
const element = document.createElement('div')
element.key = uniqueId
element.title = taskText
element.innerHTML = `
<div class="item" key={${uniqueId}}>
<div class="item_content">${taskText}</div>
<div>
<span class="addBtn" onclick="completionEvent(${uniqueId})">已完成</span>
<span class="addBtn" onclick="removeIngTask(${uniqueId})">删除</span>
</div>
</div>
`;
ingList.appendChild(element);
taskInput.value = '';
}
}
// 从待办移除任务
function removeIngTask(id) {
const residualData = doingData.filter(item=>{
if(item.id === id) return false
return true
})
doingData = [...residualData]
localStorage.setItem("doingList", JSON.stringify([...residualData]))
ingList.childNodes.forEach(childNode => {
if(childNode.key === id) {
ingList.removeChild(childNode)
}
})
}
// 从已办移除任务
function removeDoneTask(id) {
const finishedData = doneData.filter(item=>{
if(item.id === id) return false
return true
})
doneData = [...finishedData]
localStorage.setItem("doneList", JSON.stringify([...finishedData]))
doneList.childNodes.forEach(childNode => {
if(childNode.key === id) {
doneList.removeChild(childNode)
}
})
}
// 完成事件
function completionEvent(id) {
const residualData = doingData.filter(item=>{
if(item.id === id) return false
return true
})
const finishedData = doingData.filter(item=>{
if(item.id === id) return true
return false
})
localStorage.setItem("doingList", JSON.stringify([...residualData]))
localStorage.setItem("doneList", JSON.stringify([...doneData, ...finishedData]))
doingData = [...residualData]
doneData = [...doneData, ...finishedData]
ingList.childNodes.forEach(childNode => {
if(childNode.key === id) {
ingList.removeChild(childNode)
// 创建新的元素
var element = document.createElement('div')
element.key = id
element.innerHTML = `
<div class="item">
<div class="item_content strike_through">${childNode.title}</div>
<div>
<span class="addBtn" onclick="removeDoneTask(${id})">删除</span>
</div>
</div>
`;
doneList.appendChild(element);
}
})
}
</script>
</body>
</html>
