待办清单-无数据库-不能刷新-jq

最新推荐文章于 2024-09-18 18:59:47 发布

哲也_C921

最新推荐文章于 2024-09-18 18:59:47 发布

阅读量228

点赞数

分类专栏： # 待办清单文章标签： jquery css html html5 js

本文链接：https://blog.csdn.net/ahagc/article/details/106834016

版权

本文介绍了一个无数据库的待办清单功能实现，包括增加、删除单个和全部待办项以及选中已完成的功能。然而，该实现存在一个缺点：无法在页面刷新后保存清单状态。

摘要由CSDN通过智能技术生成

文章目录

一. 功能

增加待办清单
删除单个待办清单
删除全部待办清单
完成清单后选中

二. 缺点

不能刷新

三. 部分代码

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{