jQuery实现todolist

据说幸运很容易
244 阅读4分钟
  • todolist的分析：

1、刷新页面不会丢失数据，因此需要用到本地存储localStorage。

2、核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据。

3、存储的数据格式：var todolist=[{ title: 'xxx', done: false }](title中是内容，done是完成状态)。

4、注意： （1）本地存储里面只能存储字符串的数据格式。数组对象转换为字符串格式 JSON.stringify(data)。

（2）获取本地存储的数据，需要把里面的字符串转换为对象格式 JSON.parse(data)。

一、todolist按下回车把新数据添加到本地存储里面

a、注意：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。

b、利用事件对象.keyCode判断用户按下回车键(13)。

c、声明一个数组，保存数据。

d、先要读取本地存储原来的数据(声明函数getData()，放到这个数组里面)。

e、之后把最新从表单获取过来的数据，追加到数组里面。

f、最后把数组存储给本地存储(声明函数savaData())。

二、todolist本地存储数据渲染加载到页面

a、后面会经常渲染加载操作，所以声明一个函数load，方便后面调用。

b、先要读取本地存储数据。(数据不要忘记转换为对象格式)。

c、之后遍历这个数据($.each()),有几条数据，就生成几个li添加到ol里面。

($.each(arr_1,function(index,value){//其中index是指数组的下标，value指相对应的值;}))

三、todolist删除操作 a、点击里面的a链接，不是删除li而是删除本地存储对应的数据

b、核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li

c、给链接自定义属性记录当前的索引号(这样比较方便)

d、根据索引号删除相关的数据——数组的splice(i,1)方法

e、存储修改后的数据，然后存储给本地存储

f、重新渲染加载数据列表

g、因为a是动态创建的，使用on方法绑定事件

四、todolist正在进行和已完成选项操作 思路：点击复选框，修改本地存储数据，再重新渲染数据列表

a、点击之后。获取本地存储数据

b、修改对应数据属性done为当前复选框的checked状态

c、保存数据到本地存储

d、重新渲染加载数据列表

e、load加载函数中，如果当前数据done为true，渲染到ul中，否则渲染到ol中。

  • 代码部分

html部分

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </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>
        Copyright &copy; 2014 todolist.cn
    </footer>


</body>

</html>

css部分

body {
    margin: 0;
    padding: 0;
    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: 0
}

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: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

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%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

todolist.js部分

$(function(){
    load()
    var todolist=[{
        title:"今天晚上吃面",
        done:false},
        {
        title:'学习jq',
        done:false}
    ]
    // 读取本地存储的数据
   function getData(){
       var data=localStorage.getItem("todolist");
       if(data!==null){
           return JSON.parse(data);
       }else{
         return [];
     }
    }
    // 保存本地存储数据
    function saveData(data){
    localStorage.setItem("todolist",JSON.stringify(data));
    }
    // 渲染加载操作
    function load(){
        var data=getData();
        // 遍历之前清空ol，ul里面的元素内容
        $('ol').empty();
        $('ul').empty();
        $.each(data,function(index,value){
        
        if(!value.done){
            $("ol").prepend('<li><input type="checkbox" name="" id=""> <p>'+value.title+'</p> <a href="javascript:;" id='+index+'></a></li>')
        }else{
            $("ul").prepend('<li><input type="checkbox" name="" id="" checked="checked"> <p>'+value.title+'</p> <a href="javascript:;" id='+index+'></a></li>')
        }

        })
        $('#todocount').html($('ol').children().length)
        $('#donecount').html($('ul').children().length)
    }
    
    // 按下回车键添加事项
   $("#title").on('keyup',function(e){
       if(e.keyCode===13){
           if($(this).val()==='') return alert('请输入待办事项！')
        //    先读取本地存储原来的数据
           var local=getData()
        //    把local数组进行更新数据，把最新的数据追加给local数组
        local.push({title:$(this).val(),done:false});
        saveData(local)
        load()
        $(this).val('')
       }

   })
    //  删除操作
    $('ol,ul').on('click',"a",function(){
        // 获取本地存储
       var data=getData();
        // 修改数据
        var index=$(this).prop('id');
        data.splice(index,1)
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();

    })
    // 正在进行和已完成选项操作
    $('ol,ul').on('click',"input",function(){
    // 获取本地存储数据
    var data=getData();
    // 修改数据
    var index=$(this).siblings('a').prop('id');
    data[index].done=$(this).prop('checked');
    // 保存到本地存储
    saveData(data);
    // 重新渲染页面
    load();
    })
})

结语：todolist这个案例有一定逻辑性，可以拿来练手。

avatar
文章
阅读
粉丝