<!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. Sublime Text 3安装Package Control并安装Processing插件

    由于PDE编辑界面对中文的支撑太差,于是想换到ST3来编辑代码,结果导致了噩梦的开始. 首先,找不到“Package Control”!!! 这还怎么玩~ 于是打开http://packagecont ...

  2. pwd函数实现

    /* * 文件名:mypwd.c * 描述: 实现简单的pwd命令 */ #include<stdio.h> #include<stdlib.h> #include<di ...

  3. 如何在ProXmoX VE 下虚拟机安装 黑群晖 DSM 6.1.6

    ProXmoX 官方下载地址: https://www.proxmox.com/en/downloads Proxmox是一个非常优秀的开源虚拟化环境,集诸多优点于一身:开源免费,稳定可靠,架构简洁, ...

  4. Linux kill、kill-15、kill-9区别

    进程状态转换图 kill和kill -9,两个命令在linux中都有杀死进程的效果,然而两命令的执行过程却大有不同,在程序中如果用错了,可能会造成莫名其妙的现象. 执行kill(不加 -* 默认kil ...

  5. [Beta阶段]第十次Scrum Meeting

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

  6. JavaScript初探系列（十）——Event

    一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...

  7. js判断字符串是否以指定字符串开头或是否包含指定字符串

    1.  用js判断一个字符串是否是以某个子字符串开头如:ssss001是否以ssss开头, 可以这样做: 1 2 3 4 5 6 var fdStart = strCode.indexOf(" ...

  8. Python80个练手项目列表

    原文地址:https://www.shiyanlou.com/questions/102676/?utm_source=baidu&utm_medium=cpc&utm_campaig ...

  9. win7上手机ADB interface无法安装驱动

    解决办法: https://blog.csdn.net/riyuexingchen1204/article/details/84594061

  10. TortoiseGit用户名密码的更换方法介绍

    http://www.downza.cn/xy/53171.html 有时候因实际需求要更换TortoiseGit用户名密码,怎么办呢?下文就是TortoiseGit用户名密码的更换方法介绍,一起看看 ...