超详细！！原生js实现todolist页面（不含本地储存啥的）
刚学完js，完成这个todolist的过程十分痛苦，整理了这篇文章。里面js基本每一步都有详细解释，自我认为逻辑还是比较清晰。希望各位大佬轻喷。
在这里插入代码片
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ToDoList——最简单的待办事项列表title>
<link rel="stylesheet" href="./style.css">
head>
<body>
<div class="pagetop">
<div class="container">
<span class="left">
<a href="">ToDoLista>
span>
<span class="right">
<input id='saveData' value=" 添加todo" type="text" size="60" onfocus="if(this.value==' 添加todo'){this.value='';this.style.color='#424242'}"
onblur="if(this.value==''){this.value=' 添加todo';}">
span>
div>
div>
<div class="page">
<div class="container">
<div class="doing">
<h2 >正在进行h2>
0span>
<ul id='saveUl' class="doing">
ul>
div>
<div class="done">
<h2>已经完成h2>
0span>
<ul id='finishedUl' class="done">
ul>
div>
div>
div>
<div class="pagebot">
<span>Copyright © 2014 todolist.cnspan>
<a href="">cleara>
div>
body>
<script type="text/javascript">
// 分别用来储存未完成和完成事件
var arr = [];
var arrs = [];
// 绑定敲击事件，敲击键盘时执行listadd函数
document.addEventListener('keyup',listadd);
var list = document.getElementById('saveUl');
var com = document.getElementById('finishedUl');
function listadd (e) {
//如果敲的键不是回车或者输入框为空，结束函数
if(e.keyCode!==13 ||saveData.value==='') return;
//将文本框的内容赋值到arr数组中
arr.push(saveData.value);
num.innerHTML = arr.length;
list.innerHTML += '' +
''+ saveData.value + ''
saveData.value='';
}
// 用来刷新页面的函数
function init(){
//清空页面
list.innerHTML = '';
com.innerHTML = '';
num.innerHTML = arr.length;
nums.innerHTML = arrs.length;
//分别在页面中加载未完成和已完成事项，同时用index分别记录是第1,2,3,4...等事项
for(var i = 0;i < arr.length;i++){
list.innerHTML +='' +
'' + arr[i] + '' + ''
}
for(var j = 0;j < arrs.length;j++){
com.innerHTML +='' +
'' + arrs[j] +'' + ''
}
}
//当未完成被点击时执行以下函数
list.onclick =function (e){
if(e.target.nodeName==='INPUT'){
//用idx记录是未完成的第几个事项被点击到了
var idx = e.target.parentNode.getAttribute('index');
//用splice函数删除这个被点击的事项，同时赋值给last
var last = arr.splice(idx,1);
//将last存的事项传入到arrs中
arrs.push(last);
//刷新页面
init();
}
if(e.target.nodeName==='BUTTON'){
//同理，记录是谁被点击了
var idx = e.target.parentNode.getAttribute('index');
//删除这个事项
arr.splice(idx,1);
init();
}
}
//与上面函数相似~，这是已完成被点击执行的函数
com.onclick =function (e){
if(e.target.nodeName==='INPUT'){
var idx = e.target.parentNode.getAttribute('index');
var lasts = arrs.splice(idx,1);
arr.push(lasts);
init();
}
if(e.target.nodeName==='BUTTON'){
var idx = e.target.parentNode.getAttribute('index');
arrs.splice(idx,1);
init();
}
}
script>
html>
css代码
*{
padding: 0;
margin: 0;
color:inherit;
text-decoration: inherit;
}
body{
background-color: #cdcdcd;
}
.container{
margin: auto auto;
width: 680px;
/* overflow: hidden; */
}
.pagetop{
position: relative;
overflow: hidden;
height: 50px;
background-color: #333;
}
.pagetop .left {
line-height: 50px;
font-size: 30px;
color:#ddd;
float: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pagetop .right {
float: left;
display: block;
margin-top: 8px;
margin-left: 140px;
float: right;
}
.pagetop .right input{
display: inline-block;
line-height: 30px;
border-radius: 5px;
color:rgb(117,117,117);
box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
}
.page .doing{
margin-top: 20px;
}
.page .doing h2{
display: inline-block;
}
.page .doing .num{
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color:#e6e6fa;
color: #666;
font-weight: bold;
margin-left:530px ;
text-align: center;
line-height:25px;
}
.page .doing li
{
position: relative;
display: block;
margin-top: 20px;
height: 32px;
width: 650px;
padding:5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
border-left: 5px solid #629a9c;
border-radius: 3px;
}
.page .doing span{
font-size: 18px;
vertical-align: 7px;
margin-left: 5px;
display: inline-block;
}
.page .doing button{
width: 20px;
height: 15px;
line-height: 15px;
text-align: center;
position: absolute;
display:inline-block;
right: 10px;
bottom: 14px;
border-radius: 30%;
background-color:rgb(204,204,204);
color:#fff;
}
.page .done{
margin-top: 20px;
}
.page .done h2{
display: inline-block;
}
.page .done .num{
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color:#e6e6fa;
font-weight: bold;
color: #666;
margin-left:530px ;
text-align: center;
line-height:25px;
}
.page .done li{
position: relative;
display: block;
margin-top: 20px;
height: 32px;
width: 650px;
padding: 5px;
background-color: rgb(230,230,230);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
border-left: 5px solid rgb(179,179,179);
border-radius: 3px;
}
/* .page .done input{ */
/* */
/* } */
.page .done span{
font-size: 18px;
display: inline-block;
vertical-align: 6px;
margin-left: 5px;
}
.page .done button{
display:inline-block;
width: 20px;
height: 15px;
line-height: 15px;
text-align: center;
position: absolute;
right: 10px;
bottom: 14px;
border-radius: 30%;
background-color:rgb(204,204,204);
color:#fff;
}
.pagebot{
margin-top:20px ;
margin-left: -110px;
text-align: center;
color:rgb(102,102,102);
}
.pagebot a{
color:rgb(153,153,153);
}