todolist——制作个人的代办事项网页

淡淡的烟草味﹌ 2023-07-13 12:24 110阅读 0赞

写的代码较简单，考虑的没有那么全面但是可以运行

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>轮播图</title>
            <script type="text/javascript" src="../jQueryLib/jQuery.max.js"></script>
            <style type="text/css">
                * { 
                    margin:0;
                    padding:0;
                }
                .container { 
                    font-size: 16px;
                    margin: 0 auto;
                    width: 100%;
                    height: 100%;
                }
                .nav{ 
                    width: 100%;
                    height: 2em;
                    font-size: 12px;
                    line-height: 1em;
                    text-align: center;
                    background-color: #0b2e13;
                }
                .doing,.finish{ 
                    width: 50%;
                    height: 20em;
                    background-color: rgba(150,150,150,0.5);
                    margin: 1em auto;
                }
                p{ 
                    color: white;
                    font-size: 30px;
                    float: left;
                }
                .doing li{ 
                    clear: both;
                     list-style: none;
                     background-color: rgba(10,200,200,0.8);
                    cursor: move;
                    margin: 5px 1px;
                 }
                .finish li{ 
                    position: relative;
                    clear: both;
                    list-style: none;
                    color: rgba(0,0,0,0.3);
                    background-color: rgba(10,200,200,0.3);
                    cursor: move;
                }
                .count{ 
                    width: 2em;
                    height: 2em;
                    color: #0c5460;
                    float: right;
                    line-height: 2em;
                    text-align: center;
                }
                a{ 
                    float: right;
                    text-decoration: none;
                    color: white;
                }
            </style>
            <script>
                $(function () { 
                    loadData();                                                    //先加载渲染doing和finish以免开始的时候没有数据
                    
                    //1、添加数据操作
                    $('.nav input').on({ 
                        keyup: function (e) {                                        //键盘事件
                            if (e.keyCode === 13) {                                  //当敲击回车的时候进行数据更新
                                var arr = getData();                                //读取本地存储的数据
                                arr.push({ title: $(this).val(), done: false});      //把输入的内容以对象的方式加入到数组里面
                                saveData(arr);                                      //存储数组到本地存储
                                $(this).val('');                                    //表单的值赋空
                                loadData();                                         //重新渲染doing和finish内容
                            }
                        },
                        blur:function () {                                           //鼠标失去焦点事件
                            if($(this).val()){                                       //表单的值不能为空
                                var arr = getData();
                                arr.push({ title: $(this).val(), done: false});
                                saveData(arr);
                                $(this).val('');
                                loadData();
                            }
                        }
                    });
                    
                    //2、删除数据操作
                    $('.doing ul,.finish ul').on('click','a',function () {           //给动态创建的元素a添加点击事件
                        var data=getData();
                        data.splice($(this).attr('data-index'),1);                  //删除对应数组里面的内容
                        saveData(data);
                        loadData();
                    });
                    
                    //3、正在做 和 已经完成事件交换操作
                    $('.doing ul,.finish ul').on('change','input',function () { 
                        var data=getData();
                        var index=$(this).siblings('a').attr('data-index');         //获得该操作对应的index
                        data[index].done=!data[index].done;                         //给对象的done属性取反
                        saveData(data);
                        loadData();
                   });
                    
                    //封装从本地取出数据的函数，因为本地存储的数据必须是string类型，所以需要JSON.parse()把数组转化为string
                   function getData() { 
                     var data=localStorage.getItem('todolist');
                        if(data){ 
                           return JSON.parse(data);
                        }else{ 
                          return [];                                                //返回一个空数组
                       }
                  }
                  
                  //封装从本地取出数据的函数，因为本地存储的数据必须是string类型，所以需要JSON.stringify()把string转化为数组
                 function saveData(d) { 
                    localStorage.setItem('todolist',JSON.stringify(d));             //不能使用sessionStorage
                }
                
                //封装渲染doing和finish的函数
                function loadData() { 
                    $('.doing ul,.finish ul').empty();                              //渲染之前需要把以前的内容清空
                    var data = getData();
                    var count_t = 0;                                                //定义count_t来确定正在做的个数
                    var count_f = 0;                                                //定义count_f来确定完成的个数
                    $.each(data, function (i, v) {                                   //对事件进行遍历
                        if (!v.done) {                                               //若对象的done属性是false就放到doing里面
                            $('.doing ul').prepend('<li><input type="checkbox"><span class="con_doing">' +
                                v.title + '</span><a href="javascript:;" data-index=' + i + '>' + '删除' + '</a></li>');
                            count_t++;                                              //count_t计数加一
                        }else {                                                     //若对象的done属性是true就放到finish里面
                            $('.finish ul').prepend('<li>' + '<input type="checkbox" name="" checked="checked">' + '<span class="con_doing">' +
                                v.title + '</span>' + "<a href='javascript:;' data-index="+i+">删除</a>" + '</li>');
                            count_f++;                                              //count_f计数加一
                        }
                    });
                    $('.doing .doing_count').html(count_t);                         //更改对应的doing个数
                    $('.finish .finish_count').html(count_f);                         //更改对应的finish个数
                }
                });
            </script>
        </head>
        <body>
            <div class="container">
                <div class="nav">
                    <input type="text" value="" name=""/>
                </div>
                <div class="doing">
                    <p>正在：</p><span class="doing_count count"></span>
                    <ul>
                    
                    </ul>
                </div>
                <div class="finish">
                    <p>完成：</p><span class="finish_count count"></span>
                    <ul>
                    
                    </ul>
                </div>
            </div>
        </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
本文只用于个人学习和纪录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200312094313131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw==,size_16,color_FFFFFF,t_70