<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>todolist_again</title>

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .fat {

            width: 500px;

            height: 800px;

            margin: 50px auto;

        }

        h1 {

            font-size: 38px;

            color: goldenrod;

            display: inline;

            margin-right: 40px;

            /* vertical-align: middle; */

        }

        .todoinput {

            width: 300px;

            height: 50px;

            line-height: 50px;

            border-radius: 10px;

            border: 2px solid rgb(245, 161, 102);

            font-size: 28px;

            text-align: center;

            outline-style: none;

            /* outline-color: brown; */

            /* input获得焦点时，默认会出现一个蓝色外边框，设置outline属性，或者border属性，能清除该默认样式 */

        }

        h3 {

            font-size: 34px;

            float: left;

        }

        #todocount,#donecount {

            width: 30px;

            height: 40px;

            line-height: 40px;

            border-radius: 10px;

            background: goldenrod;

            display: block;

            float: right;

            margin-top: 2px;

            text-align: center;

            color:white;

        }

        .clearfix:after {

            display: block;

            height: 0;

            line-height: 0;

            content: "";

            clear: both;

            visibility: hidden;

        }

        .clearfix {

            zoom: 1;

        }

        .main {

            margin-top: 40px;

            margin-bottom:  20px;

        }

        li {

            width: 100%;

            background: olive;

            border-radius: 7px;

            height: 30px;

            line-height: 30px;

            margin-top: 10px;

            list-style: none;

            position: relative;

        }

        #donelist li{

            opacity: .6;

        }

        .check {

            width: 21px;

            height: 21px;

            margin-left: 10px;

            vertical-align: middle;

        }

        .content {

            color: white;

            margin-left: 28px;

            font-family: '宋体';

            font-size: 18px;

        }

        .del {

            width: 16px;

            height: 16px;

            border-radius: 7px;

            background: orangered;

            display: block;

            position: absolute;

            right: 8px;

            top: 15px;

            margin-top: -8px;

        }

    </style>

</head>

<body>

    <section class="fat">

            <section>

                    <!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" -->

                <h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput">

            </section>

            <section class="main">

                <section class="clearfix">

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

                </section>

                <ol id="todolist">

                    <!-- <li>

                        <input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a>

                    </li> -->

                </ol>

            </section>

            <section class="main">

                <section class="clearfix">

                    <h3>已完成</h3><span id="donecount"></span>

                </section>

                <ul id="donelist">

                </ul>

            </section>

    </section>

    <script>

        $(function(){

            // 每次刷新页面，都要直接显示原有的本地数据，即一刷新就将本地存储中已有的数据渲染到页面

            load();

            // input框获得焦点时，清空placeholder

            $('.todoinput').focus(function() {

                    $(this).prop("placeholder","");

                    // $(this).attr("style",'background:rgba(224,150,150,0.3);');//设置获得光标时输入框的背景颜色

            });

            // input框失去焦点时，设置placeholder

            $('.todoinput').blur(function() {

                    $(this).prop("placeholder",'添加todo');

                    // $(this).attr("style",'background:;');

            });

            // 读取本地存储的数据，更新本地存储数据，保存本地存储数据，将本地存储数据渲染到页面

            $('.todoinput').on('keydown',function(e) {

                // 回车事件

                if(e.keyCode===13) {

                    if($(this).val()=="") {

                        alert("输入内容不能为空！");

                    }else {

                        // 先获取本地存储中的数据

                        var local = getData();

                        // 更新数据

                        local.push({title: $(this).val(),done:false});

                        // 更新后的数据保存到本地存储

                        saveData(local);

                        //渲染页面

                        load();

                        $(this).val("");// 回车后要将input框的内容清空

                        $(this).prop("placeholder",'添加todo');//回车后回复placeholder

                        // $(this).attr("style",'background:;');//回车后回复输入框背景颜色

                        // 回车后如何失去光标？？？？？？？？？？？？？？？？

                    }

                }

            });

             // 读取本地存储数据

             function getData() {

                var data = localStorage.getItem("list");//读取本地存储中的数据，注意本地存储的数据只能是字符串格式

                // -------------console.log(typeof(data));//string

                if(data !== null){//如果有数据，就将字符串数据转json对象并返回数据

                    return JSON.parse(data);//JSON.parse()里面必须是一个字符串  如果此处报错，可能是data为undefined，可能是本地存储中的数据格式错误，application清空数据即可

                }else{//如果没有数据就返回一个空数组

                    return [];

                }

            }

            // 保存本地存储数据    注意本地存储数据都是字符串类型

            function saveData(param) {

                localStorage.setItem("list",JSON.stringify(param));

            };

            // 加载本地存储数据渲染到页面中

            function load() {

                var hh = getData();//获取本地数据，得到的是字符串数组

                // 回车事件调用渲染方法时，每次都将本地存储的所有数据遍历一遍添加进列表，如果不先清除列表的话，再加载又会重新渲染一次之前的数据。所以：遍历本地存储之前，先将ul,ol的数据清空

                $('ul,ol').empty();

                // 计算正在进行的事件数量，已经完成的事件数量

                var todocount=0;

                var donecount=0;

                // 遍历数组

                $.each(hh,function(i,n) {

                    // 本地存储里的数据分两种，已经完成的和正在进行的

                    if(n.done==false){

                        // 如果遍历到的当前元素是正在进行的数据，放入对应的ol中

                        $('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");

                        todocount++;//每添加一个Li,count加1

                    }else if(n.done==true) {

                        $('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");

                        donecount++;

                    }

                });

                // 将count值赋值给span  注意用val()无效  一刷新页面就有数据，回车就有数据，所以写在load()里面

                $('#todocount').text(todocount);

                $('#donecount').text(donecount);

            };

            // 点击复选框，ul,ol的数据相互切换   修改done属性，done为false就是正在进行，done为true就是已完成

            $('ul,ol').on('click','input',function() {

                //获取本地存储数据

                var data = getData();

                // 找到当前li所对应的本地存储中的数据，将该数据的done属性修改

                var index = $(this).siblings('a').attr('id');//获取自定义属性用attr()

                console.log($(this).prop('checked'));//被选中的复选框checked属性为true

                console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false

                //-----------------将复选框的checked属性值赋给done false or true

                // ？为什么点击正在进行的复选框不会勾选----------因为一点击，就重新渲染页面把该条数据给放到已完成列表了

                data[index].done = $(this).prop('checked');

                // 将具有新checked属性的数据保存在本地存储

                saveData(data);

                // 重新渲染页面

                load();

            });

            // 点击a标签删除当前li  ！！！！！！！！！！！！注意：不是删除页面元素，而是从本地存储中删除数据

            $('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用类名表示两个列表中的a标签会出问题，为什么？？？？？？？？？？？？？？？？？？？

                var info = getData();

                // 获取到当前a的索引号，然后从本地存储中找到相对应索引号的数据，删除

                var index = $(this).attr("id");

                // 删除数组的某个元素用splice(数组下标,个数)

                info.splice(index,1);//从索引index处开始，删除一个元素

                saveData(info);

                load();

            });

        })

    </script>

</body>

</html>

todolist 包含本地存储知识的更多相关文章

  1. HTML5移动开发实战必备知识——本地存储(2)

    了解了一些主要的本地存储使用方法和思想后.我们来系统的介绍一下本地存储. 本地存储分为三大类:localStorage/sessionStorage/本地数据库 localStorage和sessio ...

  2. HTML5移动开发实战必备知识——本地存储(1)

    本地缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能.我们都知道.要想打造一个高性能的移动应用,速度是关键.而在HTML5之前.仅仅有cookie可以存储数据,大小仅仅有4k ...

  3. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  6. HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  7. HTML5 本地存储实现购物车功能

    在家休陪产假,无聊,看自己以前的项目,突然发现之前写的购物车都是用数据库实现的,数据库实现购物车原则上没什么问题,但是需要和数据库交互,这样无意之间降低了程序的效率.今天突发奇想,如果能用HTML5本 ...

  8. HTML5本地存储——IndexedDB

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  9. 前端之本地存储和jqueryUI

    本地存储 本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路 ...

随机推荐

  1. 再见Spring Boot 1.x

    记得很早很早之前有过一次面试,面试前端说自己喜欢JavaScript,然后面试官问,你知道当前JavaScript最新标准和规范吗?我无言以对,因为平时没有关注认真对待这些信息,然后就没有然后了. 或 ...

  2. shell 求数组的平均值，求和，最大值，最小值

    test.sh #!/bin/bash arr=( ) let min=${arr[]} let max=${min} sum= ;i<${#arr[*]};i++)) do [[ ${min} ...

  3. [CMS] UsualToolCMS-8.0 sql注入漏洞【转载】

    原文地址:http://lyscholar.cn/2019/07/30/代码审计-usualtoolcms存在sql注入漏洞/ 0x01 漏洞环境 版本信息:UsualToolCMS-8.0-Rele ...

  4. Spring Boot单元测试报错java.lang.IllegalStateException: Could not load TestContextBootstrapper [null]

    1 报错描述 java.lang.IllegalStateException: Could not load TestContextBootstrapper [null]. Specify @Boot ...

  5. win10重装win7 无法引导

    品牌机win10回滚win7 无法引导 BIOS设置 按键盘上的右方向键(→)选择到"Exit" 按键盘上的下方向键(↓)选择到 "OS Optimized Defaul ...

  6. jenkins使用--部署

    软件: centos 7.x java jenkins Pipeline ansible 1.安装请看上一文 2.主要是讲部署() 目的:实现 参数化发布 说明 :构建jar包是由gitlab-ci  ...

  7. 访问者模式（Visitor Patten）

    参考文章: http://www.importnew.com/15561.html 定义: 封装某些作用于某种数据结构中各元素的操作,它可以在不改变数据结构的前提下定义作用于这些元素的新的操作. um ...

  8. [Gamma阶段]第五次Scrum Meeting

    Scrum Meeting博客目录 [Gamma阶段]第五次Scrum Meeting 基本信息 名称 时间 地点 时长 第五次Scrum Meeting 19/05/31 大运村寝室6楼 30min ...

  9. fastjson在反序列化时，解析对象中的继承，抽象类处理

    LimitActionConfig是ActionConfig的子类,RuleConfig的有个属性是ActionConfig,需要反序列化成LimitActionConfig ParserConfig ...

  10. Object changed by Unknown

    https://documentation.red-gate.com/soc7/troubleshooting/object-changed-by-unknown https://documentat ...