一. 功能
- 增加待办清单
- 删除单个待办清单
- 删除全部待办清单
- 完成清单后选中
二. 缺点
- 不能刷新
三. 部分代码
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;");
}
五. 效果图