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

随机推荐

python测试开发django-57.xadmin选项二级联动
前言当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种解决基本思路: 1.写个jqeury脚本监听cha ...
2012服务器在IIS部署的SLL(https)网址谷歌浏览器无法访问的问题解决
服务器环境:Windows Server 2012,IIS8. 当绑定了https,使用IE和Firefox浏览器能够正常访问,但是使用谷歌浏览器会出现net::ERR_CONNECTION_ABOR ...
@RequestBody, @ResponseBody 注解详解(转)
原文地址: https://www.cnblogs.com/qq78292959/p/3760651.html @RequestBody, @ResponseBody 注解详解(转) 引言: 接上一篇 ...
图解 Git
https://juejin.im/entry/5917c463da2f60005de84195
html5使用canvas动态画医学设备毫秒级数据波形图
终止java线程的2种方法
1.使用一个volatile的共享变量 2.使用interrupt方法 import java.util.concurrent.TimeUnit; /** * ThreadTest */ public ...
PHP-问题处理Fatal error: Uncaught Error: Call to undefined function simplexml_load_file()
1.问题今天重新安装了ubuntu,PHP,MySQL,Apache,到测试CMS项目时发生一个错误: Fatal error: Uncaught Error: Call to undefined ...
firewall防火墙使用
firewall用zone来区分管理,默认有以下一些zone: 丢弃(DROP) 任何流入网络的包都被丢弃,不作出任何响应.只允许流出的网络连接. 阻塞(Block) 任何进入的网络连接都被拒绝,并返 ...
eclipse下安装windowbuilder（一定要看）
访问页面https://www.eclipse.org/windowbuilder/download.php,查看更新连接这个是**连接地址**,要复制粘贴到eclipse里. !! 复制地址!!
SudaMod-81.0 / crDroidAndroid-8.1（android-8.1.0_r20）红米3 2018年5月3日更新
一.写在前面我只是个人爱好,本ROM未集成任何第三方推广软件,我只是喜欢把好的资源分享出来,若可以,我们一起学习,一起进步. 请不要问我怎么刷机! 请不要问我玩游戏卡不卡(有钱你就换好点的手机)! ...

31、cookie小test

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

随机推荐

热门专题