我们今天来做一款可以存储信息的任务管理器，这个案例可以说是非常有意思，可以说是我们前端入门的第一个小项目了，我们来看一下效果（因为我不会制作压缩后的gif，大于5M上传不了，视频也上传不了，所以我们先凑合使用图片来看一下效果）
可以实现人机数据交互，LOGO是自己随便设计的，大家凑合看，主要是功能的实现
我们先讲述一下功能的实现思路，然后我们直接上所有源代码，大家可以随意使用，转载请标明出处（知识块我们在案例环节不讲解，之前的博客中讲述过）
目录
一.思路
我们主要讲一下用户交互效果的实现思路：
1.首先我们会用到一个（小型数据库）浏览器自带存储的空间【也叫本地存储】，最多存储20M，可别觉得20M少，就这样只写字，一直不清理未完成任务的话，也可以将近使用一年
2.我们首先要获取输入框input的val()值，与鼠标（回车键：13）敲击事件和按钮点击按钮事件绑定，可以封装一个函数，鼠标点击和键盘敲击事件都会触发，减少代码阅读量，优化代码
3.将新创建的数据存储到本地存储，并发新建一个“任务块”到正在进行模块，将数据从本地存储取出来，放到我们的“任务块”中（渲染任务块），实现新建“任务块”效果
4.删除按钮：点击删除先将本地存储的信息删除，然后从新渲染一遍页面，实现删除效果
5.未完成/已完成互相切换：侦听点击复选框事件，选择中复选框（checked='checked'【true】），将当前元素放置到已完成模块下，未选中则放置到未完成模块下
6.右上角小数的实现：声明俩个新变量，当前模块下（未完成/已完成）新增元素之后，变量++，实现小数效果，删除之后会重新渲染，所以不用添加--操作
二.代码实现
<!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">
<meta name="description" content="专注工作,待办事项,记录事件,记录日常,学习办公,简单操作"/>
<meta name="keyword" content="学习办公好帮手,待办事项要牢记"/>
<title>TWFT-专注做你的工作小帮手-帮您记录待办</title>
<link rel="shortcut icon" href="./logo/favicon.ico" type="image/c-icon"/>
<link rel="stylesheet" href="./icomoon/style.css">
<link rel="stylesheet" href="./CSS/index.css">
<script src="./JS/jQuery-min.js"></script>
<script src="./JS/index.js"></script>
</head>
<style>
*{
cursor: url(./bitbug_favicon.ico) 32 32,auto;
}
</style>
<body>
<!-- nav start -->
<nav class="nav">
<header>
<!-- LOGO start -->
<div class="logo">
<h1>
<a href="javascript:;" title="TWFT">TWFT<img src="./logo/LOGO.png" alt=""></a>
</h1>
</div>
</header>
</nav>
<!-- Nodebook start -->
<div class="n-time">
<div>
<input type="text" id="nodebook" placeholder="写下你今天的任务">
<button id="btn">T</button>
</div>
</div>
<!-- content start -->
<article>
<!-- content-go-on start -->
<div class="goon-box">
<h2>正在进行</h2>
<a href="javascript:;">0</a>
</div>
<ul>
</ul>
<!-- content-accomplish start -->
<div class="accomplish">
<h2>已经完成</h2>
<a href="javascript:;">0</a>
</div>
<ol>
</ol>
</article>
<footer>
<a href="https://blog.csdn.net/weixin_63836026">@Little-snail</a>
</footer>
</body>
</html>// out : ./CSS/
// 初始化
*{
margin: 0;
padding: 0;
-webkit-font-smoothing:antialiased; // 抗锯齿形
}
a{
text-decoration: none;
}
img{
width: 100%;
height: 100%;
}
li{
list-style: none;
}
body{
background-color: #a3a3a3;
}
// nav start
.nav{
width: 100%;
height: 20vh;
background-color: #000;
overflow: hidden;
header{
position: relative;
padding-left: 20vw;
padding-right: 20vw;
.logo{
position: absolute;
left: 50%;
transform: translate(-50%);
width: 350px;
height: 120px;
h1{
margin: 0;
height: 100%;
a{
font-size: 0;
}
}
}
}
}
//nodebook start
.n-time{
width: 100%;
height: 10vh;
background-color: #fff;
div{
display: flex;
padding-left: 20vw;
padding-right: 20vw;
input{
flex: 8;
height: 5vh;
margin-top: 2.5vh;
border: 2px solid #000;
border-radius: 5px;
outline: none;
padding-left: 5px;
font-weight: bold;
box-shadow: 0 0 3px .5px #cfcfcf inset;
&:focus{
box-shadow: 0 0 3px .5px #a3dee6 inset;
border: 2px solid #a3dee6;
}
}
button{
flex: 2;
height: 5.5vh;
font-weight: bold;
margin-top: 2.5vh;
margin-left: 1vh;
border: 2px solid #000;
background-color: #2b2b2b;
color: #fff;
border-radius: 5px;
}
}
}
article{
padding-left: 20vw;
padding-right: 20vw;
}
.goon-box{
width: 100%;
height: 10vh;
background-color: #a3a3a3;
line-height: 10vh;
// border-left: 10px solid #a3a3a3;
h2{
float: left;
}
a{
float: right;
display: block;
margin-top: 3vh;
width: 4.5vh;
height: 4.5vh;
background-color: #b6d3d4;
line-height: 4.5vh;
text-align: center;
color: #000;
font-weight: bold;
border-radius: 50%;
}
}
ul{
li{
width: 100%;
background-color: #fff;
margin-bottom: 2vh;
border-radius: 5px;
border-left: 10px solid #0f9fb3;
box-shadow: 1px 0 5px 1px #707070;
line-height: 50px;
box-sizing: border-box;
display: flex;
input{
flex: 1;
width: 30px;
height: 30px;
margin: 10px;
}
h4{
flex: 8;
word-break: break-all;
}
i{
flex: 1;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
font-size: 20px;
color: #7e0202;
}
}
}
.accomplish{
width: 100%;
height: 10vh;
background-color: #a3a3a3;
line-height: 10vh;
// border-left: 10px solid #a3a3a3;
h2{
float: left;
}
a{
float: right;
display: block;
margin-top: 3vh;
width: 4.5vh;
height: 4.5vh;
background-color: #b6d3d4;
line-height: 4.5vh;
text-align: center;
color: #000;
font-weight: bold;
border-radius: 50%;
}
}
ol{
li{
width: 100%;
background-color: #8a8a8a;
margin-bottom: 5vh;
border-radius: 5px;
border-left: 10px solid #696969;
box-shadow: 1px 0 5px 1px #707070;
line-height: 50px;
box-sizing: border-box;
display: flex;
input{
flex: 1;
width: 30px;
height: 30px;
margin: 10px;
}
h4{
flex: 8;
word-break: break-all;
color: #494949;
}
i{
flex: 1;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
font-size: 20px;
color: #c2c2c2;
}
}
}
footer{
width: 100%;
height: 5vh;
background-color: transparent;
line-height: 5vh;
text-align: center;
margin-top: 5vh;
a{
color: #d6d6d6;
cursor: pointer;
}
}//目的：
//点击回车把数据存储到本地存储里
//数据存储使用数组形式
//本地存储里只能存储字符串类型的数据，所以采用JSON.stringify()方法转换成字符串
//取出时使用JSON.parse()方法转换成数组对象格式
$(function(){
load();//页面加载时就调用渲染函数
$("#nodebook").on("keydown",function(event){
if(event.keyCode === 13){
generalTask();
}
})
$("#btn").on("click",function(){
generalTask();
})
//封装总任务
function generalTask(){
if($("#nodebook").val() === ""){
alert('请输入您要完成的任务');
}else{
//第一步先读取本地存储原来已经存储的数据
var locality = getDate();
// console.log(locality);
//把最新的数据给到本地存储
//声明新数组,最佳到本地存储
locality.push({nodebook:$("#nodebook").val(),chdone:false});
//把最新数组存储到本地存储
saveDate(locality);
//将本地存储渲染到页面上
load();
$("#nodebook").val("");
}
}
//删除本地存储，保存后再次渲染一遍
$("ul,ol").on("click","i",function(){
//获取本地存储
var data = getDate();
//修改本地存储
var index = $(this).attr("id");
data.splice(index,1);
//保存本地存储
saveDate(data);
//重新渲染页面
load();
})
//正在进行和已经完成之间进行跳转效果
$("ul,ol").on("click","input",function(){
// alert(11);
//获取本地存储
var data = getDate();
//修改本地存储
var index = $(this).siblings("i").attr("id");
data[index].chdone = $(this).prop("checked");
// console.log(data);
//保存本地存储
saveDate(data);
//重新渲染页面
load();
})
//读取本地存储数据
function getDate(){ //封装方法
var data = localStorage.getItem("TWFT");
if(data != null){
return JSON.parse(data);
}else{
return [];
}
}
//保存本地存储数据
function saveDate(data){ //封装方法
localStorage.setItem("TWFT",JSON.stringify(data));
}
//渲染数据
function load(){
//读取本地存储的数据
var data = getDate();
// console.log(data);
//记数
var TWFTCount = 0;
var doneCpunt = 0;
//遍历前要清空ol里面的element内容
$("ul,ol").empty();
//遍历数据
$.each(data,function(i,n){
// console.log(n);
if(n.chdone){
$("ol").prepend("<li><input type='checkbox' checked='checked'><h4>" + n.nodebook + " </h4><i class='icomoon icon-bin' id="+ i +"></i></li>");
doneCpunt++;
}else{
$("ul").prepend("<li><input type='checkbox'><h4>" + n.nodebook + " </h4><i class='icomoon icon-bin' id="+ i +"></i></li>");
TWFTCount++;
}
})
$(".goon-box a").text(TWFTCount);
$(".accomplish a").text(doneCpunt);
}
})
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
