待办清单-无数据库-不能刷新-原生js

一. 功能

1. 增加待办清单
2. 删除单个待办清单
3. 删除全部待办清单
4. 完成清单后选中

二. 缺点

1. 不能刷新

三. 部分代码

1. CSS代码

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
input,textarea,select{
	outline: none;
}
.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}
header{
	width: 100%;
	height: 88px;
	background-color: #a7d9ff;
	color: #fff;
	text-align: center;
	line-height: 88px;
	font-size: 36px;
}
.wrap{
	width: 96%;
	padding: 0 2%;
	margin: auto;
}
.add{
	border-bottom: 1px solid #aaa;
}
.add input,.add i{
	display: block;
	float: left;
	height: 100px;
}
.add input{
	border: none;
	width: 90%;
	font-size: 32px;
}
.add input::placeholder{
	color: #ccc;
}
.add i{
	width: 10%;
	font-size: 100px;
	line-height: 100px;
	color: #ccc;
}
.list-item{
	border-bottom: 1px solid #ddd;
	height: 150px;
}
.list-item p,.list-item i{
	display: block;
	float: left;
	height: 150px;
}
.list-item-checkbox{
    display: none;
}
.list-item-checkbox+label {
    display: block;
    width: 50px;
    height: 50px;
    margin: 50px 50px 0 0;
    cursor: pointer;
    float: left;
    background-color: #a7d9ff;
}
.list-item-checkbox:checked+label::before {
    display: block;
    content: "\2714";
    text-align: center;
    font-size: 32px;
    color: white;
}
.list-item p{
	width: calc(95% - 100px);
	padding-left: 1%;
	line-height: 150px;
	font-size: 42px;	
}
.list-item i{
	width: 5%;
	font-size: 58px;
	line-height: 150px;
	color: #ccc
}
.none-list-item{
	width: 100%;
	font-size: 36px;
	line-height: 150px;
	text-align: center;
	color: #ccc;
}
footer{
	width: 100%;
	height: 88px;
	color: #a7d9ff;
	text-align: center;
	line-height: 88px;
	font-size: 36px;
}

2. THML代码

<header>
	今日待办清单
</header>
<div class="wrap">
	<div class="add clearfix">
		<input type="text" placeholder="请输入待办事项" name="add" id="add">
		<i onclick="addButton();">+</i>
	</div>
</div>
<div class="wrap">
	<div class="list" id="list">
	</div>
</div>
<footer id="footer" onclick="delAllListItem();">清理所有清单</footer>

3. 方法一：JavaScript代码

var add = document.getElementById("add");
var list = document.getElementById("list");
var footer = document.getElementById("footer");
var listItems = document.getElementsByClassName("list-item");
var num=0;
noneListItem();
for(var i=0;i<listItems.length;i++){
	// 清理单个待办清单列表
	listItems[i].lastElementChild.onclick=function(e) {
		list.removeChild(e.target.parentNode);
		// 判断待办清单列表是否为空
		if(list.children.length == 0){
			noneListItem();
		}
	}
}
// 点击单个删除事件
function addClick(){
	list.lastElementChild.lastElementChild.onclick=function(e) {
		list.removeChild(e.target.parentNode);
		// 判断待办清单列表是否为空
		if(list.children.length == 0){
			noneListItem();
		}
	}
}
// 添加待办清单列表
function addButton() {
	if(add.value == 0){
		return 0;
	}
	if(list.children[0].innerText == '暂无待办清单'){
		var noneListItem=list.children[0];
		list.removeChild(noneListItem);
		footer.setAttribute("style","display:block;");
	}
	addListItem();
	add.value="";
}
function addListItem() {
	// 添加待办清单列表
	var listItem = document.createElement("div");
	listItem.classList.add("list-item");
	listItem.classList.add("clearfix");
	list.appendChild(listItem);
	// 添加子元素 input
	var listItemChildInput = document.createElement("input");
	listItemChildInput.type="checkbox";
	listItemChildInput.setAttribute("id",num);
	listItemChildInput.classList.add("list-item-checkbox");
	listItem.appendChild(listItemChildInput);
	// 添加子元素 label
	var listItemChildLabel = document.createElement("label");
	listItemChildLabel.setAttribute("for",num);
	listItem.appendChild(listItemChildLabel);
	// 添加子元素 p
	var listItemChildP = document.createElement("p");
	listItemChildP.innerHTML = add.value;
	listItem.appendChild(listItemChildP);	
	// 添加子元素 i
	var listItemChildI = document.createElement("i");
	listItemChildI.innerHTML = 'x';
	listItem.appendChild(listItemChildI);
	addClick();
	num++;
}
// 清理所有待办清单列表
function delAllListItem() {
	var listItems = document.getElementsByClassName("list-item");
	for(var i = listItems.length - 1; i>=0 ;i--){
	listItems[i].parentNode.removeChild(listItems[i]);
}
noneListItem();
}
// 添加 暂无待办清单
function noneListItem() {
	var noneListItem = document.createElement("div");
	noneListItem.classList.add("none-list-item");
	noneListItem.innerHTML = '暂无待办清单';
	list.appendChild(noneListItem);
	footer.setAttribute("style","display:none;");
}

五. 效果图