31、cookie小test

732 0 0

作者:飞刀还问情

请尽量使用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);
    }

运行效果：

内容来源于网络如有侵权请私信删除

标签： jQuery jQuery插件 jQuery教程

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

31、cookie小test

31、cookie小test

相关课程

热门标签

31、cookie小test

31、cookie小test

相关课程

热门标签

推荐文章