<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>每日任务列表</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: aqua;
}
.div1{
width: 100%;
height: 50px;
background-image: linear-gradient(125deg,deepskyblue,purple);
}
.div1 .dov1{
width: 500px;
margin: auto;
}
.div1 .dov1 span{
font-size: 30px;
}
.div1 input{
margin-left: 50px;
width: 200px;
height: 30px;
color: #C0C0C0;
outline: none;
}
.div2{
margin:40px auto;
width: 500px;
border: 1px solid transprant;
position: relative;
color: black;
font-size: 30px;
}
.div2 .div3{
width: 30px;
height: 30px;
background-color: plum;
border-radius: 50%;
position: absolute;
top: 10px;
right: 0px;
font-size: 18px;
line-height: 30px;
text-align: center;
}
.div2 .div4{
width: 30px;
height: 30px;
background-color: plum;
border-radius: 50%;
position: absolute;
top: 10px;
right: 0px;
font-size: 18px;
line-height: 30px;
text-align: center;
}
button{
cursor: pointer;
width: 50px;
background-color: black;
color: green;
}
a{
float: right;
}
li{
list-style: none;
background-color: white;
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
}
p{
display: inline-block;
}
ul input{
width: 20px;
height: 20px;
}
ol input{
width: 20px;
height: 20px;
}
ol li{
background-color: #C0C0C0;
color: gray;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<div class="div1">
<div class="dov1">
<span>任务列表:</span>
<input type="text" value="添加任务">
<button>添加</button>
</div>
</div>
<div class="div2">
正在进行:
<ul class="todolist"></ul>
<div class="div3">0</div>
</div>
<div class="div2">
已经完成:
<ol class="donelist"></ol>
<div class="div4">0</div>
</div>
<script>
//本地存储里面只能存储字符串的数据格式,可以通过JSON.stringify()转化为字符串的形式
//取出本地存储中储存的数据必须要转化为对应的数据格式,转化为数组对象用JSON.parse()
load();
$("button").on("click",function(){
//先读取本地存储原来的数据
var local=getData();
//把local数组进行更新数据,把最新的数据追加给local数组
local.push({"title":$("input").val() , "done":false});
//把数组local存储到本地存储
saveData(local);
load();
})
//当鼠标焦点在文本框时清空内容
$("input").on("focus",function(){
$(this).val("");
})
//给委派给ul当中的每个a绑定点击事件
$("ul,ol").on("click","a",function(){
var data=getData();
var index=$(this).attr("id");
data.splice(index,1);
saveData(data);
load();
})
$("ol, ul").on("click","input",function(){
//先获取数据
var data=getData();
//修改数据,点击复选框修改done的值
var index=$(this).siblings('a').attr("id");
data[index].done=$(this).prop("checked");
console.log(index);
saveData(data);
load();
})
function getData(){
var data=localStorage.getItem("todolist");
if(data!==null){
//本地存储里面的数据是字符串格式的,我们需要转化为对象格式
return JSON.parse(data);
}else{
return [];
}
}
function saveData(data){
localStorage.setItem("todolist",JSON.stringify(data));
}
function load(){
//读取本地存储的数据
var data=getData();
//先清空ol当中的数据
$("ul").empty();
$("ol").empty();
//遍历这个数据
var todocount=0;
var donecount=0;
$.each(data,function(i,n){
if(n.done){
$("ol").prepend("<li><input type='checkbox' checked='checked' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");
donecount++;
}else{
$("ul").prepend("<li><input type='checkbox' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");
todocount++;
}
//这个地方如果用单引号代表字符串,双引号代表拼接
})
$(".div3").text(todocount);
$(".div4").text(donecount);
}
</script>
</body>
</html>
使用html+css+jQuery做一个每日任务列表
于 2021-10-19 16:49:50 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)