作业题目：实现“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项目”的更多相关文章

  1. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  2. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  3. 开发“todolist“”项目及其自己的感悟

    一,项目题目: 实现“todolist项目” 该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存.固定. 二,todolist简介 ToDoList是一款非常优秀 ...

  4. 一年开发ASP.NET MVC4项目经验总结

    一年开发ASP.NET MVC4项目所用所学技术经验总结 阅读目录 文章背景 前端所用技术摘要 后端所用技术摘要 1. 文章背景 本人2014年从Java转行到C#从事BS项目的开发,刚开始接触的是A ...

  5. Bootstrap相关优质项目推荐

    Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...

  6. Bootstrap相关优质项目必备网址

    1:文档全集:这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史.Bootstrap本身就是一个传奇,而这些文档就是传奇的见证! 官方网址:http://docs.bootcss.c ...

  7. Mac下通过npm安装webpack 、vuejs，以及引入jquery、bootstrap等（初稿）

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

  8. 用vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...

  9. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

  1. kettle下载地址

    kettle 4.4和4.2 版本是好的,版本6.6和8.2 版本有bug Kettle下载和安装: 1.官网各个版本下载地址:https://sourceforge.net/projects/pen ...

  2. [python]近日 用3种库 实现简单的窗口 的回顾~

    最近任务:利用python 实现以下4个窗口弹窗. 信息提示框 文本输入框(需在窗口消失后,返回 用户输入的值) 文件选择(需在窗口消失后, 返回 用户选择的文件名的全路径) 文件夹选择(需在窗口消失 ...

  3. python 修改文件的创建时间、修改时间、访问时间

    目录 python 修改文件创建.修改.访问时间 方案一 方案二(无法修改文件创建时间) python 修改文件创建.修改.访问时间 突如其来想知道一下 python 如何修改文件的属性(创建.修改. ...

  4. 植物大战僵尸：查找植物叠加种植CALL

    实验目标:我们都知道植物大战僵尸游戏中植物是不可以叠加种植的,也就是一个格子只能种植一个植物,今天我们将实现一个格子里种植无限多的植物. 我们首先需要找到植物的种植CALL,然后在逐步测试观察功能之间 ...

  5. 深度学习之卷积神经网络CNN及tensorflow代码实现示例

    深度学习之卷积神经网络CNN及tensorflow代码实现示例 2017年05月01日 13:28:21 cxmscb 阅读数 151413更多 分类专栏: 机器学习 深度学习 机器学习   版权声明 ...

  6. 怎样测试nginx.conf配置文件的正确性

    方法: 使用 nginx -t 命令  nginx -t 如果一切正常, 则会显示:

  7. C# enum枚举知识总结

    C#中除了简单的变量类型外,还提供了三种较为复杂的变量类型,包括枚举.结构和数组.本文主要讲述枚举相关的知识. 枚举类型(也称为枚举),提供了一种有效的方式,来定义可能分配给变量的一组已命名的整数常量 ...

  8. 搞懂String、StringBuffer、StringBuilder的区别

    String.StringBuffer.StringBuilder有什么区别呢? 1.String: 首先String是不可变的这是家喻户晓的,它的底层是用一个final修饰的char数组来保存数据的 ...

  9. arcgis之gp服务发布

    arcgis之gp服务发布 注意: 1.arcgis服务可以直接通过arcmap来发布,gp服务就是将arcmap中的工具发布为服务,达到线上处理数据的能力 2.以文件为参数时不要以文件直接为参数,可 ...

  10. 9.动态SQL

    动态 SQL,主要用于解决查询条件不确定的情况:在程序运行期间,根据用户提交的查 询条件进行查询. 提交的查询条件不同,执行的 SQL 语句不同.若将每种可能的情况均逐一 列出,对所有条件进行排列组合 ...