<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
}
header {
width: 100%;
height: 50px;
background-color: rgb(41, 41, 41);
}
.w {
display: block;
width: 600px;
height: 100%;
margin: 0px auto;
padding-top: 10px;
}
.search_wrapper input {
float: right;
width: 300px;
height: 30px;
border-radius: 5px;
border-style: none;
box-shadow: rgb(133, 132, 132) 0px 0px 2px 2px inset;
padding-left: 10px;
outline: none;
}
label {
width: 150px;
font-size: 25px;
color: white;
line-height: 100%;
}
input {
flex: 1;
color: rgb(97, 95, 95);
}
.type {
font-size: 25px;
font-weight: bold;
}
.counter {
float: right;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
text-align: center;
line-height: 20px;
}
ol,
ul {
margin-top: 20px;
}
li {
display: none;
list-style: none;
width: 100%;
height: 30px;
background-color: white;
margin-bottom: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
ol>li {
border-left: 4px solid green;
}
ul>li {
border-left: 4px solid gray;
background-color: rgb(241, 239, 239);
opacity: 0.5;
}
li>input {
margin: 5px 10px;
width: 20px;
height: 20px;
border-radius: 5px;
vertical-align: middle;
}
p {
margin: auto 10px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
li>a {
float: right;
width: 10px;
height: 10px;
border-radius: 8px;
background-color: lightgray;
border: 3px solid white;
box-shadow: lightgray 0px 0px 0px 2px;
vertical-align: middle;
margin-top: 5px;
margin-right: 5px;
}
footer {
color: gray;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="search_wrapper w">
<label for="">ToDoList</label>
<input class="search" name="" id="" placeholder="添加ToDo" autofocus="autofocus">
<!-- <span class="search"> 添加ToDo</span> -->
</div>
</header>
<div class="container w">
<div class="current w">
<div class="current_wrapper w">
<span class="type">正在进行</span>
<span class="current counter">0</span>
</div>
<ol>
<!-- <li>
<input type="checkbox" name="" id="">
<p> 哈哈哈</p>
<a class="for_click" href="javascript:;"></a>
</li>
<li>
<input type="checkbox" name="" id="">
<p> 哈哈哈</p>
<a class="for_click" href="javascript:;"></a>
</li> -->
</ol>
</div>
<div class="finished w">
<div class="finished_wrapper w">
<span class="type">已经完成</span> <span class="finished counter">0</span>
</div>
<ul>
<!-- <li>
<input type="checkbox" name="" id="">
<p> 哈哈哈</p>
<a class="for_click" href="javascript:;"></a>
</li> -->
</ul>
</div>
</div>
<footer>Copyright © 2014 todolist.cn</footer>
</body>
<script>
$(function () {
//1.创建对象todolist数组用于存储页面信息
//1.监听搜索栏回车按下事件,判断输入内容是否为空,如果不为空在正在进行下方的ol中创建添加li,并把文本信息引入其中
//2.对动态生成的li中的勾选框绑定勾选监听事件,如果被勾选,则在正在进行中删除该条信息,在已完成中添加这条信息
//3.对动态生辰的li中的删除按钮绑定事件,如果被点击则该条信息删除
//4.封装函数统计所有的正在进行事件数量和已经完成的事件数量,并显示在正在进行后面的span中
// window.localStorage.clear();
var current_count = 0;
var finished_count = 0;
var toDoList = [];
//1. 获取数据
function get_data() {
toDoList = window.localStorage.getItem("ToDoList");
if (toDoList == null) {
return [];
} else {
return JSON.parse(toDoList);
}
}
//2. 页面渲染
function show() {
var data = get_data();
$('ul').html("");
$('ol').html("");
current_count = 0;
finished_count = 0;
for (var i = 0; i < data.length; i++) {
var li = $('<li></li>');
li.attr("index", i);
if (data[i].done == false) {
li.html($('<input type="checkbox" name="" id="" ><p>' + data[i].value + '</p> <a class="for_click" href="javascript:;"></a>'))
$('ol').prepend(li);
li.slideDown(1);
current_count++;
} else {
li.html($('<input type="checkbox" name="" id="" checked="checked"><p>' + data[i].value + '</p> <a class="for_click" href="javascript:;"></a>'))
$('ul').prepend(li);
li.slideDown(1);
finished_count++;
}
}
$(".current_wrapper>.counter").text(current_count);
$(".finished_wrapper>.counter").text(finished_count);
}
show();
//3.绑定搜索框的回车按下事件
$('.search').keydown(function (event) {
if (event.keyCode == 13 && $(this).val() != "") {
var val = $(this).val();
var data = get_data();
data.push({
value: val,
done: false
});
window.localStorage.setItem("ToDoList", JSON.stringify(data));
$(this).val("");
show();
}
})
//4.绑定正在进行勾选框的勾选功能
$('ol').on('change', 'input', function () {
//如果被勾选,则将ToDoList中的done的状态改为true,重新加载页面
if ($(this).prop("checked") == true) {
var index = $(this).parent().attr('index');
console.log(index);
var data = get_data();
data[index]["done"] = true;
window.localStorage.setItem("ToDoList", JSON.stringify(data));
show();
}
})
//5. 绑定已完成勾选框的勾选功能
$('ul').on('change', 'input', function () {
//如果被勾选,则将ToDoList中的done的状态改为false,重新加载页面
if ($(this).prop("checked") == false) {
var index = $(this).parent().attr('index');
console.log(index);
var data = get_data();
data[index]["done"] = false;
window.localStorage.setItem("ToDoList", JSON.stringify(data));
show();
}
})
//6. 绑定删除功能
$('ul,ol').on('click', 'a', function () {
//如果被点击,则将ToDoList中的对应的数值删除,重新加载页面
var index = $(this).parent().attr('index');
console.log(index);
var data = get_data();
data.splice(index, 1);
console.log("data:" + data);
window.localStorage.setItem("ToDoList", JSON.stringify(data));
console.log("current_count:" + current_count);
console.log("finished_count:" + finished_count);
show();
})
})
</script>
</html>
前端案例-27 jQuery 本地存储,todolist
最新推荐文章于 2022-10-01 03:16:15 发布