<div class="header">

        <section>

            <label for="">ToDoList</label>

            <input type="text" id="title" name="title" placeholder="添加ToDo" required>

        </section>

    </div>

    <section>

        <h2>正在进行<span id="todocunt"></span></h2>

        <ol id="todolist" class="demo-box">

            <!-- <li>

                <input type="checkbox" name="" id="">

                <p>123</p>

                <a href="#"></a>

            </li> -->

        </ol>

        <h2>已经完成<span id="donecount"></span></h2>

        <ul id="donelist">

        </ul>

        <footer>

            Copyright &copy; 2014 todolist.cn

        </footer>

    </section>

$(function () {

    // localStorage.removeItem('todolist')

    load();

    $("#title").on("keydown", function (event) {

        if (event.keyCode === 13) {

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

                alert("请输入内容")

            } else {

                var local = getDate();

                // 把最新的数据追加给local数组

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

                // 把这个数组local 存储给本地存储

                saveData(local);

                load()

                $(this).val("")

            }

        }

    })

    // 读取本地存储的数据

    function getDate() {

        var data = localStorage.getItem("todolist")

        if (data !== null) {

            return JSON.parse(data);

        } else {

            return [];

        }

    }

    // 保存本地存储数据

    function saveData(data) {

        localStorage.setItem("todolist", JSON.stringify(data));

    }

    // todolist删除

    $("ol,ul").on("click", "a", function () {

        var data = getDate();

        // 修改数据

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

        data.splice(index, 1)

        // 保存到本地存储

        saveData(data);

        // 重新渲染页面

        load()

    })

    // 选项操作

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

        var data = getDate();

        //修改数据

        var index = $(this).siblings("a").attr("id")

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

        // 保存本地存储

        saveData(data)

        // 重新渲染

        load()

    })

    // 渲染数据

    function load() {

        // 读取本地存储数据

        var data = getDate();

        // 遍历之前需要清空ol里面的内容

        $("ol,ul").empty()

        var todoCount = 0;

        var doneCount = 0;

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

            if (n.done) {

                $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javadcript:;' id=" + i + ">删除</a></li>")

                doneCount++;

            }

            else {

                $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javadcript:;' id=" + i + ">删除</a></li>");

                todoCount++;

            }

        })

        $("#todocunt").text(todoCount)

        $("#donecount").text(doneCount)

    }

})

body {

    margin:;

}

.header {

    height: 50px;

    line-height: 50px;

    background: rgba(47, 47, 47, 0.98);

}

section {

    width: 600px;

    padding: 0 10px;

    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;

}

h2 {

    position: relative;

}

ol,

ul {

    padding:;

    list-style: none;

}

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);

}

li input {

    position: absolute;

    top: 2px;

    left: 10px;

    width: 22px;

    height: 22px;

    cursor: pointer;

}

ul li {

    border-left: 5px solid #999;

    opacity: 0.5;

}

a,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;

}

css