作业题目：实现“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. 学习笔记：CentOS7学习之十五： RAID磁盘阵列的原理与搭建

    目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...

  2. C语言--单层循环结构

    一.PTA实验作业 题目1:最佳情侣身高 1.实验代码 int N, i; float height; char sex; printf("输入用户个数:\n"); scanf(& ...

  3. Java:集合类的数据结构

    本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java的集合其实就是各种基本的数据结构(栈,队列,hash表等),基于业务需求进而演变出的Java特有的数据 ...

  4. java日志框架系列（1）：slf4j框架简介及依赖

    1.slf4j日志框架 1.简介 slf4j只是是日志规范,即只定义了接口,并没有实现这些接口. SLF4J的全称是Simple Logging Facade for Java,即简单日志门面.SLF ...

  5. unittest参数化（paramunittest）

    前言 paramunittest是unittest实现参数化的一个专门的模块,可以传入多组参数,自动生成多个用例前面讲数据驱动的时候,用ddt可以解决多组数据传入,自动生成多个测试用例.本篇继续介绍另 ...

  6. django 中静态文件项目加载问题

    问题描述: django项目中创建了多个app后,每个app中都有对应的static静态文件.整个项目运行时这些静态文件的加载就是一个问题,因为整个项目我只参与了一部分,项目部署之类的并没有参与.我写 ...

  7. 怎样创建一个canvas画布环境

    1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...

  8. Java门面模式（思维导图）

    图1 门面模式[点击查看图片] 1,实体对象类 package com.cnblogs.mufasa.demo1; //3个子系统,解决问题的实体 public class StoreA { //示意 ...

  9. vue中的键盘事件

    @keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13     按回车键 @keyup.enter ...

  10. 批量Insert

    oracle INSERT ALL ,) ,) ,) FROM DUAL