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,可以马上生效,它的生效时间是下一次请求页面.

随机推荐

用distinct or array_unique
在 Mysql 获取数据时,如果想获取某一列去重数据,如果获取呢举个例子: advert_pro_ad 表 CREATE TABLE `advert_pro_ad` ( `advert_id` ) ...
Android_Printservice_API_部分翻译
文件夹 * package android.printservice * public abstract class PrintService * public abstract class Prin ...
uc浏览器视频缓存合并工具
1.该软件用于将uc浏览器中零散的视频缓存切片处理成完整的视频文件. 开发语言:C#开发工具: Visual Studio 2017 Community 实例图示: 程序代码下载地址 windows ...
PL/SQL学习笔记之包
一:包包是由一组相关的函数,过程,变量,游标等PL/SQL程序设计元素的组合而成的一个PL/SQL程序单元,相当于Java中的类. 包的主要作用是封装:把相同或相似的东西归类,方便维护和管理,提高开 ...
网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法
在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...
Android RecyclerView的item大小保持四个半
现在有这么一个需求,实现下图的UI. 我想你应该能想到用RecyclerView实现, 当我唰唰唰几分钟做完之后,UI设计师跟我说,每个item,无论在什么手机上,都要显示四个半,具体看下图 ...
带你Python入门，踏进人工智能领域
1.Python能做什么? 不知大家没有看<中国好声音>呢?有位选择就是利用AI改编了一首周杰伦的歌<止战之殇>. Python适合做人工智能AI吗? 很明确的告诉你,可以! ...
Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系法律法规规章条例国王诏书.docx \Atiitt 手写文字识别讯飞科大语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化每日心灵鸡汤值班发布.docx \Atitit 几大研发体系对比 Stage-Gat
Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系法律法规规章条例国王诏书.docx \Atiitt 手写文字识别 ...
你可能不知道的IDEA高级调试技巧
一.条件断点循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值. 参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件即可 ...
Java编程的逻辑 (93) - 函数式数据处理 (下)
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

31、cookie小test

31、cookie小test的更多相关文章

随机推荐

热门专题