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_againtitle>
    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>todolisth1>input type="text" placeholder="添加todo" class="todoinput">
            section>
            
            section class="main">
                section class="clearfix">
                    h3>正在进行h3>span id="todocount">span>
                section>
                ol id="todolist">
                     

                        了jog了
                    
 -->
                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("
"+n.title+""+i+">");
                        todocount