31、cookie小test
请尽量使用JQuery进行代码编写，需求如下：
1. 页面初始化样式如图
2. 顶部input框中输入内容，按下回车enter键后，“正在进行” 列表中加入该条内容。
3. 顶部input框中输入内容，按下回车enter键后，“正在进行” 列表中继续加入内容。右上角的数字跟随列表数目变化而变化。
4. 点击列表左侧checkbox，可以将“正在进行”的列表项变更为“已经完成”的列表项。每个列表中的数字要跟随变动。
5. 点击列表项右侧的删除按钮可以删除列表项。
6. 将当前列表项内容保存在cookie中，做持久存储，下一次访问页面的时候，仍可以看到以前的列表项内容。
7. 要求样式布局尽量和图片上保持一致
参考代码：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/jquery.cookie.js" ></script>
<script type="text/javascript" src="js/index.js" ></script> </head>
<body>
<div class= "head">
<label for="">ToDoList</label>
<input type="text" name="" id="" value="" placeholder="添加ToDo" />
</div>
<div class = "show_box clear-fix">
<div class = "doing">
<h2><span>正在进行</span><span class = "doing_num">0</span></h2>
<!-- <div>
<input type="checkbox">
<span>今天我要学英语</span>
<span class="del">-</span> </div> --> </div>
<div class="done">
<h2><span>已经完成</span><span class = "done_num">0</span></h2>
<!-- <div>
<input type="checkbox" checked="checked" >
<span>今天我要学法语</span>
<span class="del">-</span> </div> -->
</div>
</div> </body>
</html>
CSS：
charset "utf-8";
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:16px;}
b,strong{font-weight:normal;}
em,i{font-style:normal;}
a,u{text-decoration:none;}
img{border:0;display:block;}
ul,ol,li{list-style:none;}
input{outline:none;}
.clear-fix:after{content:".";clear:both;display:block;height:0;overflow: hidden;visibility: hidden;}
.head{
padding-left: 10px;
height:30px;
line-height: 30px;
width:490px;
background: #333;
color:#fff;
margin:0 auto;
}
h2{
font-size:20px;
font-weight: 900;
}
.head input{
border:1px solid #333;
float:right;
margin: 5px 10px 0;
width:300px;
border-radius: 5px;
}
.show_box{
padding:10px;
min-height:300px;
line-height: 30px;
width:480px;
background: #cdcdcd;
margin:0 auto;
}
.doing_num{
float:right;
width:30px;
text-align:center;
font-size: 18px;
border-radius: 15px;
background: #e7e5fa;
color: #646464;
}
.done_num{
float:right;
width:30px;
text-align:center;
font-size: 18px;
border-radius: 15px;
background: #e7e5fa;
color: #646464;
}
.del{
float: right;
height:25px;
width:25px;
line-height: 25px;
display: inline-block;
border-radius: 25px;
border:1px solid #d00;
font-size:40px;
color:#fff;
background: #ccc;
text-align: center;
cursor: pointer;;
}
.doing div{
background:#fff;
margin:10px 0 10px;
}
.done div{
background: #e6e6e6;
margin:10px 0 10px;
}
JS：
//初始化
$(function(){
doingInit();
doneInit();
doingShow();
doneShow();
})
//添加到doing后的操作
$(function(){
var $txt = $(".head input");
$txt.keydown(function(){
if (event.keyCode == "13") {//keyCode=13是回车键
//添加doing任务
addDoing();
//新加入的doing添加到done
var $che = $(".doing input");
$che.each(function(index,value){
$(this).click(function(){
addDone();
delDoing();
//新加入的done删除
var $done_del = $(".done .del");
$done_del.each(function(){
$(this).click(function(index,value){
delDone();
})
})
})
})
//新加入的doing删除
var $done_del = $(".done .del");
$done_del.each(function(){
$(this).click(function(index,value){
delDoing();
})
})
}
})
});
//直接操作
$(function(){
//添加到done
var $che = $(".doing input");
$che.each(function(index,value){
$(this).click(function(){
addDone();
delDoing();
//新加入的done删除
var $done_del = $(".done .del");
$done_del.each(function(){
$(this).click(function(index,value){
delDone();
})
})
})
})
//doing删除
var $done_del = $(".done .del");
$done_del.each(function(){
$(this).click(function(index,value){
delDoing();
})
})
//原有done删除
var $done_del = $(".done .del");
$done_del.each(function(){
$(this).click(function(index,value){
delDone();
})
})
}) //doing显示
function doingShow(){
var cookieStr = $.cookie('doing') ? $.cookie('doing') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
// console.log(cookieObj);
for(var key in cookieObj){
var conId = cookieObj[key];
var str =`
<div data-good-id="${key}" class = "doingInfo">
<input type="checkbox">
<span>${conId.con}</span>
<span class="del">-</span> </div>
`
$('.doing').append(str); }
} //添加到doing
function addDoing(){
var conId = new Date().getTime();
var con = $(this).val();
var cookieStr = $.cookie("doing") ? $.cookie('doing') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
if(conId in cookieObj){
alert("已经添加完成")
}else{
cookieObj[conId] = {
"con":con
}
}
$.cookie('doing',JSON.stringify(cookieObj),{"expires": 7,path : '/'});
// console.log($.cookie('doing'))
var str =`
<div data-good-id="${conId}" class = "doingInfo">
<input type="checkbox">
<span>${con}</span>
<span class="del">-</span> </div>
`
$('.doing').append(str);
}
//添加done
function addDone(){
var cookieObj = cookieStrConvertCookieObj(covar conId = parseInt($(this).parents(".doingInfo").remove().attr("data-good-id"));
//console.log(parseInt($(this).parent().attr("data-good-id")))
var cookieStr = $.cookie('doing') ? $.cookie('doing') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr); // var con = cookieObj[conId].con;
delete cookieObj[conId];
var str =`
<div data-done-id="${conId}" class = "doneInfo">
<input type="checkbox" checked="checked">
<span>${con}</span>
<span class="del">-</span> </div>
`
$('.done').append(str);
$.cookie('doing',JSON.stringify(cookieObj),{"expires": 7,path : '/'});
var cookieStr = $.cookie("done") ? $.cookieokieStr);
if(conId in cookieObj){
alert("已经添加完成")
}else{
cookieObj[conId] = {
"con":con
}
}
$.cookie('done',JSON.stringify(cookieObj),{"expires": 7,path : '/'});
// console.log($.cookie('done'));
}
//删除done
function delDone(){
var conId = parseInt($(this).parents(".doneInfo").remove().attr("data-done-id"));
var cookieStr = $.cookie('done') ? $.cookie('done') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
// var con = cookieObj[conId].con;
delete cookieObj[conId];
$.cookie('done',JSON.stringify(cookieObj),{"expires": 7,path : '/'});
//doneInit();
} //删除doing
function delDoing(){
var conId = parseInt($(this).parents(".doingInfo").remove().attr("data-good-id"));
var cookieStr = $.cookie('doing') ? $.cookie('doing') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
// var con = cookieObj[conId].con;
delete cookieObj[conId];
$.cookie('doing',JSON.stringify(cookieObj),{"expires": 7,path : '/'});
//doingInit();
} //done显示
function doneShow(){
var cookieStr = $.cookie('done') ? $.cookie('done') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
// console.log(cookieObj);
for(var key in cookieObj){
var conId = cookieObj[key];
var str =`
<div data-done-id="${key}" class = "doneInfo">
<input type="checkbox" checked="checked">
<span>${conId.con}</span>
<span class="del">-</span> </div>
`
$('.done').append(str);
}
} function cookieStrConvertCookieObj(str){
if(!str){
return {};
}
return JSON.parse(str);
}
//初始化数量
function doingInit(){
var cookieStr = $.cookie('doing') ? $.cookie('doing') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
var num = 0;
for(var key in cookieObj){
num ++;
// console.log(num);
}
$('.doing_num').text(num);
}
function doneInit(){
var cookieStr = $.cookie('done') ? $.cookie('done') : "";
var cookieObj = cookieStrConvertCookieObj(cookieStr);
var num = 0;
for(var key in cookieObj){
num ++;
// console.log(num);
}
$('.done_num').text(num);
}
运行效果：
31、cookie小test的更多相关文章
- Cookie小案例-----记住浏览过的商品记录
Cookie小案例------记住浏览过的商品记录 我们知道,这个功能在电商项目中非经常见.这里处理请求和页面显示都是由servlet实现,主要是为了体现cookie的作用, 实现功能例如以下: 1, ...
- cookie小栗子-实现简单的身份验证
关于Cookie Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里,或是从客户端的硬盘里读取数据的一种技术. 用来保存客户浏览器请求服务器页面的请求信息,可以在HTTP返回 ...
- 左手Cookie“小甜饼”，右手Web Storage
目录 1. Web Storage 2. Cookie机制 3. 二者的联系与区别 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一种新的浏览器端数据储存机制,它提 ...
- cookie——小甜品
Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cookie英文意指饼干,不过在电脑术语中它可不像饼干那么简单.简单的说,Cookie就是服务器暂存放在你计算机上的一 ...
- cookie小析
cookie用于存储数据,当用户访问了某个网站(网页)时,我们就可以通过cookie来向访问者电脑上存储数据1.不同的浏览器存放的cookie位置不同,也不能通用2.cookie的存储是以域名的形式进 ...
- 20160328 javaweb Cookie 小练习
利用cookie实现历史记录浏览: 由于是简单演示,所以直接用javabean 取代数据库了 数据存储类: package com.dzq.dao; import java.util.*; impor ...
- Javascript Cookie小插件
var ManagerCookie = function(){ //添加cookie function addCookie(key,value,time,path){ key = encodeURI( ...
- Session & Cookie小知识~
Cookie 一个HTTP cookie的(也称为网络Cookie,互联网的cookie,浏览器cookie,或者干脆饼干)是一小块从发送的数据的网站用户的并存储在用户的计算机上的网页浏览器,而用户浏 ...
- cookie小细节
设置cookie时,不像设置session,可以马上生效,它的生效时间是下一次请求页面.
随机推荐
- Outlook Error: The Delegates settings were not saved correctly. Cannot activate send-on-behalf-of list.
When user want to set Delegates for a user of a mailbox, the user meet below error. Step 1: Step 2: ...
- [rtsp]海康IPC监控摄像头远程外网监控配置（DDNS）
本来这个DDNS服务正是我想要的,但是配置了之后海康提示不再提供这个服务了,以后统一使用萤石云了,看来有必要去学习下萤石开放平台的api,看都提供哪些服务. 海康威视网络摄像机出厂的默认IP地 ...
- [Canvas]空战游戏进阶 增加己方子弹管理类
点此下载源码,可用Chrome打开观看. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http ...
- Python学习笔录
参考:http://www.runoob.com/python3/python3-data-type.html 1. type和isinstance区别type(A()) == A, type()不会 ...
- PHP会员找回密码功能实现实例介绍
设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名时,点击登录页面的“找回密码”超链接,打开表单,并输入注册用的E-MAIL邮箱,提交. 3. ...
- ssh连接服务器失败解决记录
故障:db2inst1用户无法通过ssh连接数据库服务器. 但是root用户可以连接,连接后su – db2inst1用户报错: su: cannot set user id: Resource te ...
- 【iCore4 双核心板_ARM】例程三十一：HTTP_IAP_FPGA实验——更新升级FPGA
实验现象: 核心代码: int main(void) { GPIO_InitTypeDef GPIO_InitStruct; __HAL_RCC_GPIOI_CLK_ENABLE(); __HAL_R ...
- KM算法小结
最近有一个需求,主要内容如下: APP一般刷新一次,会返回6个Item(6可能会变),每个Item都要展示一个广告,其中每个Item会发送一个请求,返回的结果是一个广告数组,比如[ad1, ad2, ...
- Deepin 系统下安装VMware并激活
1.打开深度商店:搜索VMware,并下载安装. 2.打开启动器:点击VMware-install. 3.填写管理员密码. 4.下一步,完成安装. 5.打开VMware Workstation,输入密 ...
- chrome 下 input[file] 元素cursor设置pointer不生效的解决
https://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html 环境是chrome浏览器,今天发现为html网页中的input [fil ...