HTML+CSS+原生JS手写todolist

代码分三个部分

1.htlm部分

	
		
		 
		
		
		
	
	
		

			

				

					ToDoList
					
				
			
		
		

			
正在进行 
			

				
			
			
已经完成 
			

			
		
		

			Copyright © 2014 todolist.cn clear
		
		
	

 2.css部分

body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	background: #CDCDCD;
}

header {
	height: 50px;
	background: #333;
	background: rgba(47, 47, 47, 0.98);
}

section {
	margin: 0 auto;
}

label {
	float: left;
	width: 100px;
	line-height: 50px;
	color: #DDD;
	font-size: 24px;
	cursor: pointer;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
	float: right;
	width: 60%;
	height: 24px;
	margin-top: 12px;
	text-indent: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
	border: none
}

input:focus {
	outline-width: 0
}

h2 {
	position: relative;
}

span {
	position: absolute;
	top: 2px;
	right: 5px;
	display: inline-block;
	padding: 0 5px;
	height: 20px;
	border-radius: 20px;
	background: #E6E6FA;
	line-height: 22px;
	text-align: center;
	color: #666;
	font-size: 14px;
}

ol,
ul {
	padding: 0;
	list-style: none;
}

li input {
	position: absolute;
	top: 2px;
	left: 10px;
	width: 22px;
	height: 22px;
	cursor: pointer;
}

p {
	margin: 0;
}

li p input {
	top: 3px;
	left: 40px;
	width: 70%;
	height: 20px;
	line-height: 14px;
	text-indent: 5px;
	font-size: 14px;
}

li {
	height: 32px;
	line-height: 32px;
	background: #fff;
	position: relative;
	margin-bottom: 10px;
	padding: 0 45px;
	border-radius: 3px;
	border-left: 5px solid #629A9C;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
	cursor: move;
}

ul li {
	border-left: 5px solid #999;
	opacity: 0.5;
}

li a {
	position: absolute;
	top: 2px;
	right: 5px;
	display: inline-block;
	width: 14px;
	height: 12px;
	border-radius: 14px;
	border: 6px double #FFF;
	background: #CCC;
	line-height: 14px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
}

footer {
	color: #666;
	font-size: 14px;
	text-align: center;
}

footer a {
	color: #666;
	text-decoration: none;
	color: #999;
}

@media screen and (max-device-width: 620px) {
	section {
		width: 96%;
		padding: 0 2%;
	}
}

@media screen and (min-width: 620px) {
	section {
		width: 600px;
		padding: 0 10px;
	}
}

 3.原生js部分

var title = document.querySelector('#title') //表单
var ol = document.querySelector('#todolist') //正在进行
var ul = document.querySelector('#donelist') //已完成
/*回车键存储数据*/
title.addEventListener('keydown', function(e) {
	var arr = getData()
	if (e.keyCode == 13) {
		var todo = {
			title: title.value,
			done: false
		}
		arr.push(todo)
		saveData(arr)
		var form = document.querySelector('#form') //让表单返回默认值
		form.reset()
		load()
	}
})

//获取数据
function getData() {
	var data = window.localStorage.getItem('todo')
	if (data != null) {
		return JSON.parse(data)
	} else {
		return []
	}
}

//存储数据
function saveData(tdlist) {
	window.localStorage.setItem('todo', JSON.stringify(tdlist))
}

//加载数据
function load() {
	var todoCount = document.querySelector('#todocount')
	var doneCount = document.querySelector('#donecount')
	var todocount = 0;
	var donecount = 0;
	/* 删除原来的子节点 */
	var olchilds = ol.childNodes;
	for (var i = olchilds.length - 1; i >= 0; i--) {
		ol.removeChild(olchilds[i]);
	}
	var ulchilds = ul.childNodes;
	for (var i = ulchilds.length - 1; i >= 0; i--) {
		ul.removeChild(ulchilds[i]);
	}
	var data = getData()
	data.forEach((item, index) => {
		var li = document.createElement('li')
		/* li.innerHTML = "
"+item.title+"
-"*/
		li.innerHTML =
			`
${item.title}
-`
		if (item.done) {
			ul.insertBefore(li, ul.children[0])
			li.children[0].checked = 'checked'
			donecount++
		} else {
			ol.insertBefore(li, ol.children[0])
			todocount++
		}
	})
	todoCount.innerText = todocount
	doneCount.innerText = donecount
}
//编辑数据
function edit() {
	ol.addEventListener('cilick', function(e) {
		var p = e.target
		if (p.nodeName == 'p') {
			p.innerHTML = ``
			p.children[0].select()
			p.children[0].addEventListener('blur', function() {
				var data = getData()
				var i = p.id.substring(1)
				data[i].title = this.value
				saveData(data)
				load()
			})
		}
	})
}
edit()

//删除数据
function remove() {
	ol.addEventListener('click', function(e) {
		var a = e.target
		if (a.nodeName == 'A') {
			var i = a.id
			var data = getData()
			data.splice(i, 1)
			saveData(data)
			load()
		}
	})
}
remove()
//切换正在进行和完成
function change() {
	ol.addEventListener('click', function(e) {
		var input = e.target
		if (input.nodeName == 'INPUT') {
			var i = input.nextElementSibling.nextElementSibling.id
			console.log(i);
			var data = getData()
			data[i].done = true
			saveData(data)
			load()

		}
	})
	ul.addEventListener('click', function(e) {
		var input = e.target
		if (input.nodeName == 'INPUT') {
			var i = input.nextElementSibling.nextElementSibling.id
			console.log(i);
			var data = getData()
			data[i].done = false
			saveData(data)
			load()
		}
	})
}
change()

 效果图