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项目”的更多相关文章

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
开发“todolist“”项目及其自己的感悟
一,项目题目: 实现“todolist项目” 该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存.固定. 二,todolist简介 ToDoList是一款非常优秀 ...
一年开发ASP.NET MVC4项目经验总结
一年开发ASP.NET MVC4项目所用所学技术经验总结阅读目录文章背景前端所用技术摘要后端所用技术摘要 1. 文章背景本人2014年从Java转行到C#从事BS项目的开发,刚开始接触的是A ...
Bootstrap相关优质项目推荐
Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册根据最新的 jQuery 1.1 ...
Bootstrap相关优质项目必备网址
1:文档全集:这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史.Bootstrap本身就是一个传奇,而这些文档就是传奇的见证! 官方网址:http://docs.bootcss.c ...
Mac下通过npm安装webpack 、vuejs，以及引入jquery、bootstrap等（初稿）
前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...
用vuejs实现一个todolist项目
用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...
Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

Java—System类入门学习
第三阶段 JAVA常见对象的学习 System类 System类包含一些有用的字段和方法,他不能被实例化 //用于垃圾回收 public static void gc() //终止正在运行的java虚 ...
Android 变量取名神器
前言在工作中,我们还在为起变量名而苦恼吗?今天无意间发现一个专门为变量取名而诞生的神器 codelf. 我们可以直接浏览器访问 http://unbug.github.io/codelf/ 现在我们 ...
什么是文件存储NAS
阿里云文件存储(Network Attached Storage,简称 NAS)是面向阿里云 ECS 实例.E-HPC 和容器服务等计算节点的文件存储服务. 定义阿里云文件存储 NAS 是一个可共享 ...
【LOJ】#3102. 「JSOI2019」神经网络
LOJ#3102. 「JSOI2019」神经网络首先我们容易发现就是把树拆成若干条链,然后要求这些链排在一个环上,同一棵树的链不相邻把树拆成链可以用一个简单(但是需要复杂的分类讨论)的树背包实现 ...
IPv4
1.IPv4分类地址 PC0(192.168.0.1) 和PC1(172.168.0.1)如果要ping通的话需要设置各自网关 PC0 设置IP 和默认网关=路由器设置IP 2.Gigabit ...
C语言字符串替换
void exchg(char * str) { if(str == NULL) return; int len = strlen(str); char tmp; for(int i=0,j=len- ...
cmake 升级
cmake 升级 1下载 cmake-3.1.0.tar.gz2.解压 3.执行 ./configure 4.执行 make 5. 执行 sudo make install 6.添加环境变量 ...
memcached基本操作指令
item执行命令: 第一行:Key Flags ExpirationTime BytesKey:Key 用于查找缓存值Flags:一个32位的标志值,客户机使用它存储关于键值对的额外信息Expirat ...
html中script标签使用async属性和defer属性的区别
相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...
4、Wepy-Redux基本使用参考自https://blog.csdn.net/baidu_32377671/article/details/86708019
摘抄自https://juejin.im/post/5b067f6ff265da0de02f3887 wepy 框架本身是支持 Redux 的,我们在构建项目的时候,将是否安装 Redux 选择 y ...

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

作业需求:

程序目录划分：

实现效果：

总结：

Jquery开发&BootStrap 实现“todolist项目”的更多相关文章

随机推荐

热门专题