页面预览
HTML
< div class = "main" >
< div class = "header" >
< div class = "logo" > todoList< / div>
< input type= "text" placeholder= "请输入..." id= "input" / >
< / div>
< div class = "doing todo" >
< h3>
< span class = "title" > 正在进行< / span>
< span class = "num" > < / span>
< / h3>
< div class = "list" >
< ! -- < div class = "todoItem" > -- >
< ! -- < input type= "checkbox" > -- >
< ! -- < div class = "content" > 内容< / 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" > -- >
< ! -- < input type= "checkbox" > -- >
< ! -- < div class = "content" > 内容< / div> -- >
< ! -- < div class = "del" > 删除< / div> -- >
< ! -- < / div> -- >
< / div>
< / div>
< / div>
CSS
* {
margin: 0 ;
padding: 0 ;
- webkit- box- sizing: border- box;
- moz- box- sizing: border- box;
box- sizing: border- box;
}
body{
background- color: #cccccc;
font- size: 16 px;
}
. main{
width: 3.75 rem;
}
. header{
width: 3.75 rem;
height: 0.5 rem;
background- color: #87 ceeb;
display: flex;
justify- content: space- between;
align- items: center;
}
. header> . logo{
width: 1.2 rem;
height: 0.5 rem;
font- weight: bold;
text- align: center;
line- height: 0.5 rem;
font- size: 0.25 rem;
}
. header> input{
height: 0.3 rem;
width: 2.5 rem;
margin: 0 0.2 rem;
border- radius: 0.05 rem;
border: none;
outline: none;
padding: 0 0.1 rem;
}
. todo h3{
height: 0.6 rem;
line- height: 0.6 rem;
display: flex;
justify- content: space- between;
align- items: center;
padding: 0 0.15 rem;
}
. todo . list{
padding: 0 0.15 rem;
}
. todo . todoItem{
display: flex;
height: 0.38 rem;
line- height: 0.38 rem;
align- items: center;
background: #888888 ;
border- radius: 0.05 rem;
overflow: hidden;
margin- bottom: 0.1 rem;
}
. todo . todoItem: before{
width: 0.04 rem;
height: 0.38 rem;
background: #00 B7FF;
content: "" ;
}
. todo . todoItem> input{
width: 0.2 rem;
height: 0.2 rem;
margin: 0 0.2 rem;
}
. todo . todoItem . content{
width: 2.6 rem;
}
. todo . todoItem . del{
background: #ff6700;
width: 0.4 rem;
height: 0.2 rem;
font- size: 0.12 rem;
line- height: 0.2 rem;
text- align: center;
border- radius: 0.05 rem;
color: #cccccc;
}
. done. todo . todoItem{
opacity: 0.3 ;
}
. pc . main{
width: 600 px;
}
JavaScript
初始化定义
var doingListDiv = document. querySelector ( ".doing .list" ) ;
var doneListDiv = document. querySelector ( ".done .list" ) ;
var mainDiv = document. querySelector ( ".main" ) ;
var doingnumDiv = document. querySelector ( ".doing .num" ) ;
var donenumDiv = document. querySelector ( ".done .num" ) ;
if ( localStorage. todoList == undefined) {
var todoList = [ ] ;
} else {
var todoList = JSON . parse ( localStorage. todoList) ;
}
获取输入对象,并将其内容添加到todoList
var inputDom = document. querySelector ( "#input" ) ;
inputDom. onkeydown = function ( event) {
if ( event. key == 'Enter' ) {
var value = inputDom. value;
var objList = {
content: value,
isDone: false
} ;
todoList. push ( objList) ;
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">删除</div>` ;
doingListDiv. appendChild ( todoItem) ;
}
} )
var doingnum = document. querySelectorAll ( ".doing .todoItem" ) . length;
console. log ( doingnum) ;
doingnumDiv. innerHTML = doingnum;
var donenum = document. querySelectorAll ( ".done .todoItem" ) . length;
console. log ( donenum) ;
donenumDiv. innerHTML = donenum;
}
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) ;
}
}
`` ’