Jquery开发&BootStrap 实现“todolist项目”

作业题目：实现“todolist项目”

作业需求:

基础需求：85%
参考链接http://www.todolist.cn/
1. 将用户输入添加至待办项
2. 可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组，也可以将已完成变成未完成
3. todolist的每一项可删除和编辑
4. 下方有clear按钮，并清空所有todolist项
5. 使用html、css、js、jquery编写

编码规范需求：15%
1. 代码有相应的注释
2. 程序有文档说明文件（README.md参考：https://github.com/csrftoken/vueDrfDemo）
3. 程序的说明文档必须包含的内容：程序的实现的功能、程序的启动方式、程序的运行效果
4. 程序设计的流程图
(可以参考：https://www.processon.com/view/link/589eb841e4b0999184934329)

程序目录划分：

css:样式
js:js
ToDoList.html：网站
README.md:说明文档

实现效果：

总结：

体会到了数据渲染视图，数据驱动视图，需要多练习。

html代码：

<!DOCTYPE html>

<html>

<head>

    <title>ToDoList-最简单的待办事项列表</title>

    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

    <!--头部栏 -->

    <header>

        <section>

            <form action="javascript:void(0);" id="form">

                <label for="title">ToDoList</label>

                <input type="text" name="title" id="title" placeholder="添加ToDo">

            </form>

        </section>

    </header>

    <!-- 中间 -->

    <section>

        <h2>正在进行 <span id="todocount"></span></h2>

        <ol id="todolist" class="demo-box">

        </ol>

        <h2>已经完成 <span id="donecount"></span></h2>

        <ul id="donelist">

        </ul>

    </section>

    <!-- 脚部栏 -->

    <footer>

        路飞学城todolist.cn <a href="javascript:;">clear</a>

    </footer>

    <script src="js/jquery-3.4.1.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</body>

</html>

css代码：

body {

        margin:;

        padding:;

        font-size:16px;

        background: #CDCDCD;

    }

header {

        height:50px;

        background:#333;

        background:rgba(47,47,47,0.98);

    }

section{

    margin:0 auto;

}

label{

    float:left;

    width:100px;

    line-height:50px;

    color:#DDD;

    font-size:24px;

    cursor:pointer;

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

}

header input{

    float:right;

    width:60%;

    height:24px;

    margin-top:12px;

    text-indent:10px;

    border-radius:5px;

    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;

    border:none

}

input:focus{outline-width:}

h2{

    position:relative;

}

span{

    position:absolute;

    top:2px;

    right:5px;

    display:inline-block;

    padding:0 5px;

    height:20px;

    border-radius:20px;

    background:#E6E6FA;

    line-height:22px;

    text-align:center;

    color:#666;

    font-size:14px;

    }

ol,ul{

    padding:;

    list-style:none;

    }

li input{

    position:absolute;

    top:2px;

    left:10px;

    width:22px;

    height:22px;

    cursor:pointer;

    }

p{

    margin:;

}

li p input{

    top:3px;

    left:40px;

    width:70%;

    height:20px;

    line-height:14px;

    text-indent:5px;

    font-size:14px;

    }

li{

    height:32px;

    line-height:32px;

    background: #fff;

    position:relative;

    margin-bottom: 10px;

    padding:0 45px;

    border-radius:3px;

    border-left: 5px solid #629A9C;

    box-shadow: 0 1px 2px rgba(0,0,0,0.07);

    }

ol li{

    cursor:move;

}

ul li{border-left: 5px solid #999;

    opacity: 0.5;

    }

li a{

    position:absolute;

    top:2px;

    right:5px;

    display:inline-block;

    width:14px;

    height:12px;

    border-radius:14px;

    border:6px double #FFF;

    background:#CCC;

    line-height:14px;

    text-align:center;

    color:#FFF;

    font-weight:bold;

    font-size:14px;

    cursor:pointer;

    }

footer{color:#666;

    font-size:14px;

    text-align:center;

    }

footer a{

    color:#666;

    text-decoration:none;

    color:#999;

}

@media screen and (max-device-width: 620px)

{section{

    width:96%;

    padding:0 2%;

    }

}

/*响应式 大于620px的时候显示下面的css样式*/

@media screen and (min-width: 620px)

 {section{

     width:600px;

     padding:0 10px;

 }

}

js代码：

$(function(){

    //数据渲染视图,数据驱动视图

    //加载数据的方法

    function loadData(){

        var collection = localStorage.getItem('todo');

        if (collection) {

            return JSON.parse(collection);

        }else{

            return [];

        }

    }

    //保存数据的方法

    function saveData(data){

        localStorage.setItem('todo',JSON.stringify(data));

    }

    //更新数据

    function update(i,key,value){

        var data = loadData();

        //删除

        // var i = parseInt($(this).attr('index'));

        var todo = data.splice(i,1)[0];

        //done-->true

        todo[key] =value;

        //替换

        data.splice(i,0,todo);

        saveData(data);

        load();

    }

    //加载网页的数据

    load();

    function load(){

        var todoCount = 0;

        var doneCount = 0;

        var doneStr ='';

        var todoStr ='';

        var todoList = loadData();

        if (todoList && todoList.length>0) {

            //有数据

            todoList.forEach(function(data,i){

                if(data.done){

                    //已经完成

                    doneStr +=`<li>

                                    <input type="checkbox" index=${i} checked="checked">

                                    <p id='p-${i}' index=${i}>${data.title}</p>

                                    <a href="javascript:;">-</a>

                                </li>`;

                    doneCount++;

                }else{

                    //正在进行

                    todoStr +=`<li>

                                    <input type="checkbox" index=${i}">

                                    <p id='p-${i}' index=${i}>${data.title}</p>

                                    <a href="javascript:;">-</a>

                                </li>`;

                    todoCount++;

                }

                $('#donelist').html(doneStr);

                $('#todolist').html(todoStr);

                $('#todocount').html(todoCount);

                $('#donecount').html(doneCount);

            })

        }else{

            //无数据

            $('#todolist').html('');

            $('#donelist').html('');

            $('#todocount').html(todoCount);

            $('#donecount').html(doneCount);

        }

    }

    //添加数据的方法

    $('#title').keydown(function(event){

        if(event.keyCode ===13){

            //获取输入框的值

            var val = $(this).val();

            if(!val){

                alert('please input~')

            }else{

                var data = loadData();

                data.unshift({

                    title:val,

                    done:false,

                });

                //清空input

                $(this).val('');

                //更新一下数据

                saveData(data);

                load();

            }

        }

    })

    //事件代理的方式 删除数据的方法

    $('#todolist').on('click','a',function(){

        var data = loadData();

        var i =$(this).parent().index();

        //在数组中删除

        data.splice(i,1);

        saveData(data);

        load();

    })

    $('#donelist').on('click','a',function(){

        var data = loadData();

        var i =$(this).parent().index();

        //在数组中删除

        data.splice(i,1);

        saveData(data);

        load();

    })

    //更新数据

    $('#todolist').on('change','input[type=checkbox]',function(){

        //获取li的索引

        var i = parseInt($(this).attr('index'));

        //更新数据

        update(i,'done',true);

    })

    //编辑操作

    $('#todolist').on('click','p',function(){

        // var i =$(this).parent().index();

        var i = parseInt($(this).attr('index'));

        console.log(i);//

        var title = $(this).html();

        var $p=$(this);

        $p.html(`<input type='text' id='input-${i}' value=${title}>`);

        //获取焦点 选中

        $(`#input-${i}`)[0].setSelectionRange(0,$(`#input-${i}`).val().length);

        $(`#input-${i}`).focus();

        //失去焦点

        $(`#input-${i}`).blur(function(){

            if ($(this).val().length===0) {

                $p.html(title);

            }else{

                update(i,'title',$(this).val());

            }

        })

    })

})

巴特西

Jquery开发&BootStrap 实现“todolist项目”

作业需求:

程序目录划分：

实现效果：

总结：

最新文章

热门文章