<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../JSlib/jquery-3.4.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #bbbbbb;
}
header>section{
width: 100%;
height: 50px;
font-size: 30px;
line-height: 30px;
text-align: center;
background-color: gray;
padding-top: 10px;
}
header>section>label{
/* 为了解决label和input对不齐的问题，需要设置label和input的vertical-align为一样的 */
vertical-align: middle;
padding-right: 50px;
}
header>section>input{
display: inline-block;
height: 30px;
margin-top: 3px;
/* line-height: 30px; */
vertical-align: middle;
}
#List{
margin: 20px auto;
text-align: center;
background-color: #cccccc;
}
#todoCount{
background-color: chocolate;
/* border-radius: 50%; */
margin-left: 110px;
}
#doneCount{
background-color: chocolate;
/* border-radius: 50%; */
margin-left: 110px;
}
/* #todoList{
text-align: center;
} */
#todoList>li{
position: relative;
list-style: none;
margin: 0 auto;
width: 30%;
background-color: cadetblue;
margin-top: 5px;
}
#doneList>li{
position: relative;
list-style: none;
margin: 0 auto;
width: 30%;
background-color: #eeeeee;
margin-top: 5px;
}
#todoList>li::after{
content: "";
clear: both;
/*必须有这个display属性才可以清除浮动*/
display: block;
}
#doneList>li::after{
content: "";
clear: both;
/*必须有这个display属性才可以清除浮动*/
display: block;
}
#todoList>li>input
{
float: left;
}
#doneList>li>input
{
float: left;
}
#todoList>li>p{
font-size: 10px;
line-height: 15px;
color: red;
display: inline-block;
position: absolute;
left: 15px;
}
#doneList>li>p{
font-size: 10px;
line-height: 15px;
color: red;
display: inline-block;
position: absolute;
left: 15px;
}
#todoList>li>a{
display: inline-block;
position: absolute;
right: 0;
top: 1px;
font-size: 10px;
background-color: chartreuse;
width: 10px;
height: 10px;
border-radius: 50%;
}
#doneList>li>a{
display: inline-block;
position: absolute;
right: 0;
top: 1px;
font-size: 10px;
background-color: chartreuse;
width: 10px;
height: 10px;
border-radius: 50%;
}
/* #todoList>li>a::after{
content: "删除";
} */
</style>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" name="title" id="title" placeholder="添加todo" required>
</section>
</header>
<section id="List">
<h2>正在进行<span id="todoCount">0</span></h2>
<ol id="todoList" class="demoBox">
<!-- <li>
<input type="checkbox" >
<p>123</p>
<a href="#">删除</a>
</li> -->
</ol>
<h2>已经完成<span id="doneCount">00</span></h2>
<ul id="doneList"></ul>
</section>
<footer></footer>
</body>
<script>
$(function(){
//本地存储只能存储字符串的数据，如果想要存储对象就得把对象转换成字符串格式
//对象转换成字符串格式JSON.stringify(object)
//要取它得时候就需要把字符串转换成对象JSON.parse(string)
//用户按下回车键就把todolist这个对象存入localStorage event.keyCode(13)
//每次打开页面自动渲染数据
load()//每次渲染加载之前，先把ol得内容清空,然后加载最新得数据
$("#title").on("keydown",function(e){
//使用on是为了能动态添加元素的同时给动态添加的元素加上样式
if(e.keyCode===13){
if($(this).val()===""){
alert("请输入todolist!")
}
else
{
//先读取本地存储原来得数据
var local=getData();
console.log(local);
//2.把local数组进行更新数据，追加数据
local.push({
title:$(this).val(),
done:false
})
//把这个local数组存储到本地
savaData(local)
//3.把本地存储得数据渲染到页面
load();
$(this).val("")
}
}
});
//读取本地存储原来得数据
function getData(){
var data=localStorage.getItem("todoList");
if(data!==null){
//本地存储里面得数据字符串格式
return JSON.parse(data);
}
else{
return [];
}
}
function savaData(data){
localStorage.setItem("todoList",JSON.stringify(data))
}
//渲染加载数据
function load(){
//先读取本地数据
var data=getData();
//遍历此数据
///每次遍历之前先清空ol得内容，在重新加载数据，不然加载页面调用一次，回车再调用会造成数据重复
$("ol,ul").html("")
var todoCount=0;
var doneCount=0;
$.each(data,function(index,data){
//为了后期方便得到a的索引
if(data.done)
{
$("ul").prepend("<li><input type='checkbox' checked='checked'><p>"+data.title+"</p> <a href='#' id="+index+"></a></li>")
doneCount++;
}
else
{
$("ol").prepend("<li><input type='checkbox'><p>"+data.title+"</p> <a href='#' id="+index+"></a></li>")
todoCount++;
}
})
$("#todoCount").text(todoCount)
$("#doneCount").text(doneCount)
}
//删除数据
//先获取本地的存储数据，然后删除相应的数据，重新渲染li
//可以给链接自定义属性记录当前的索引号--因为a在li里面不是亲兄弟
//然后根据索引号删除相关的数据--数组的splice(index,1)方法从index开始删除1个元素
//存储修改后的数据，然后存储给本地
//重新渲染列表
$("ol,ul").on("click","a",function(){
//先获取本地的存储数据，然后删除相应的数据，重新渲染li
var data=getData();
//attr获取自定义属性
var index=$(this).attr("id");
//删除数组元素
data.splice(index,1);
//保存到本地
savaData(data);
//重新渲染页面
load();
})
//已做和未做切换
//当点了晓得复选框，修改本地的存储数据在渲染
//1.点击之后获取本地数据
//2.修改相应数据的done属性为当前复选框的checked状态false->ol true->ul
//3.load函数新增一个条件false->ol true->ul
$("ol,ul").on("click","input",function(index){
var data=getData()
//因为复选框是a的兄弟，拿到a的索引和就可以拿到复选框索引号
var index=$(this).siblings("a").attr("id");
//prop获取固有属性
data[index].done=$(this).prop("checked");
//保存到本地
savaData(data)
//渲染
load()
})
})
</script>
</html>```
ToDoList
最新推荐文章于 2021-03-18 08:16:45 发布
1306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
