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

最新推荐文章于 2024-04-30 16:57:21 发布

laluneX

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量432

点赞数

分类专栏：案例文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_45969777/article/details/104812210

版权

案例专栏收录该内容

3 篇文章 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>

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

laluneX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todolist——制作个人的代办事项网页

写的代码较简单，考虑的没有那么全面但是可以运行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script type="text/javascri...
复制链接

扫一扫