一、明确需求
1.移动端为主且PC端可用
2.输入框：输入待办事项
3.未完成列表：可以显示未完成的内容，且可以对每一项内容进行修改（完成、删除）
4.已完成列表：可以显示完成的内容，且可以对每一项内容进行修改（未完成、删除）
二、项目制作顺序
1.HTML结构
2.CSS样式
3.JavaScript功能
①输入框的输入功能
②未完成列表的显示功能
③完成列表的显示功能
④修改和删除列表的功能
三、实例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TODOLIST</title>
<meta name='viewport' content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' type='text/css' href='css/style.css' />
</head>
<body>
<div class='main'>
<div class='header'>
<div class='logo'>TODO</div>
<input type='text' id='input' placeholder="请输入待办事项" />
</div>
<div class='doing todo'>
<h3>
<span class='title'>待完成</span>
<span class='num'>0</span>
</h3>
<div class='list'>
<div class='todoItem'>
<input type='checkbox' />
<div class='content'>123152151</div>
<div class='del'>——</div>
</div>
</div>
</div>
<div class='done todo'>
<h3>
<span class='title'>已完成</span>
<span class='num'></span>
</h3>
<div class='list'>
<div class='todoItem ii'>
<input type='checkbox' checked='checked' />
<div class='content'>123152151</div>
<div class='del'>——</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #efefef;
font-size: 16px;
}
.main{
width:3.75rem;
}
.header{
width:3.75rem;
heigth:0.5rem;
background: skyblue;
display: flex;
justify-content: space-between;
align-items: center;
}
.header>.logo{
width:1.2rem;
height:0.5rem;
text-align: center;
line-height: 0.5rem;
font-size: 0.25rem;
font-weight: 900;
}
.header>input{
width: 2.2rem;
height: 0.3rem;
margin: 0 0.2rem;
padding: 0 0.1rem;
border-radius: 0.05rem;
border: none;
outline: none;
}
.todo h3{
height: 0.6rem;
line-height: 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.15rem;
}
.todo .list{
padding: 0 0.15rem;
}
.todo .todoItem{
display: flex;
align-items: center;
height: 0.38rem;
line-height: 0.32rem;
background: lightcyan;
border-radius: 0.05rem;
overflow: hidden;
margin-bottom: 0.1rem;
}
.todo .todoItem::before{
width:0.04rem;
height: 0.38rem;
background: deepskyblue;
content: '';
}
.todo .todoItem>input{
width:0.25rem;
height:0.25rem;
margin: 0 0.2rem;
}
.todo .todoItem .content{
width:2.65rem;
color: #333;
}
.todo .todoItem .del{
background: orangered;
width: 0.4rem;
height: 0.2rem;
font-size: 0.12rem;
text-align: center;
line-height: 0.2rem;
border-radius: 0.03rem;
margin: 0 0.1rem;
color: #fff;
}
.done.todo .todoItem{
-webkit-filter:grayscale(1);
}
JavaScript
function resize(){
document.documentElement.style.setProperty('font-size', (document.documentElement.clientWidth/3.75) + 'px')
}
window.onresize = resize
resize()
if(localStorage.todoList==undefined){
var todoList = []
}else{
var todoList = JSON.parse(localStorage.todoList)
}
var doingListDiv = document.querySelector(".doing .list")
var doneListDiv = document.querySelector(".done .list")
var mainDiv = document.querySelector('.main')
var inputDom = document.querySelector('#input')
inputDom.onkeydown = function(event){
if(event.key=='Enter'){
console.log(event)
var value = inputDom.value;
var objItem = {
content:value,
isDone:false
}
todoList.push(objItem)
console.log(todoList)
render(todoList)
}
}
function render(todoList){
localStorage.todoList = JSON.stringify(todoList);
doingListDiv.innerHTML = ''
doneListDiv.innerHTML = ''
todoList.forEach(function(item,index){
var todoItem = document.createElement('div')
todoItem.className = 'todoItem';
if(item.isDone){
todoItem.innerHTML = `
<input type='checkbox' checked='checked' data-index='${index}'/>
<div class='content'>`+item.content+`</div>
<div class='del'>删除</div>`
doneListDiv.appendChild(todoItem)
}else{
todoItem.innerHTML = `
<input type='checkbox' data-index='${index}' />
<div class='content'>`+item.content+`</div>
<div class='del' data-index='${index}'>删除</div>`
doingListDiv.appendChild(todoItem)
}
})
}
render(todoList)
doingListDiv.onchange = function(e){
var index = parseInt(e.target.dataset.index);
todoList[index].isDone = true;
render(todoList)
}
doneListDiv.onchange = function(e){
var index = parseInt(e.target.dataset.index);
todoList[index].isDone = false;
render(todoList)
}
mainDiv.onclick = function(e){
if(e.target.className=='del'){
var index = parseInt(e.target.dataset.index);
todoList.splice(index,1);
render(todoList)
}
}
