作业题目：实现“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. HanLP分词工具中的ViterbiSegment分词流程

    本篇文章将重点讲解HanLP的ViterbiSegment分词器类,而不涉及感知机和条件随机场分词器,也不涉及基于字的分词器.因为这些分词器都不是我们在实践中常用的,而且ViterbiSegment也 ...

  2. js唤醒手机APP

    if (navigator.userAgent.match(/android/i)) { // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为 / ...

  3. jQuery报错：Uncaught TypeError: _this.attr is not a function

    问题:想通过延时把置灰的按钮再次复原,代码如下: $("#sendEmailCode").on("click", function() { var _this ...

  4. Ural 1201 Which Day Is It? 题解

    目录 Ural 1201 Which Day Is It? 题解 题意 输入 输出 题解 程序 Ural 1201 Which Day Is It? 题解 题意 打印一个月历. 输入 输入日\((1\ ...

  5. 剑指offer43：左旋转字符串（字符串）：对于一个给定的字符序列S，请你把其循环左移K位后的序列输出。

    1 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”a ...

  6. Photon Server 实现注册与登录(三) --- 前端UI设计和发起请求

    一.打开之前的测试项目.先将服务端代码编译一下,在 bin/Debug/目录下会发现有一个Common.dill.我们相应导入到前端使用.直接拖拽到相应地方 UI相应布局属于前端操作,这里就不做介绍了 ...

  7. selenium登录4399

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  8. linux mysql 数据库操作导入导出 数据表导出导入

    linux mysql 数据库操作导入导出 数据表导出导入 1,数据库导入 mysql -uroot -p show databases; create database newdb; use 数据库 ...

  9. 牛客 26C 手铐 (缩环, 树形dp)

    先缩环建树, 对于树上个环$x,y$, 假设$x,y$路径上有$cnt$个环(不包括$x,y$), 贡献就为$2^{cnt}$. 这题卡常挺严重的, 刚开始用并查集合并竟然T了. #include & ...

  10. [Tarjan系列] 无向图e-DCC和v-DCC的缩点

    上一篇讲了如何应用Tarjan算法求出e-DCC和v-DCC. 那么这一篇就是e-DCC和v-DCC的应用之一:缩点. 先讲e-DCC的缩点. 我们把每一个e-DCC都看成一个节点,把所有桥边(x,y ...