todolist本地存储实现版(html+css+JQuery)

emmm,这个demo应该是我学习完jQuery之后的一个小总结吧,具体实现了:

1. todolist这个添加任务的功能

2. todolist这个标记任务完成的功能

3. 本地储存的功能(没钱租服务器(bushi[毕竟只是个小demo,平时自己用用应该没问题,前提是浏览器的记录不清楚…]

题外话:可能有些人觉得都2022年了,怎么还有人在玩 传统框架 ,本人认为既然是一个框架嘛,对于一个初学者来学学也没什么大问题

[中间不好在代码中解释以及需要另外解释的地方将以 @[numer] 来标记]

    

        

            
            
            ToDoList
            
        
    
    

        
正在进行 
        
        


        
        
已经完成 
        
        


        
    
    
    

header {
    height: 50px;
    background: #333;
}

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,.24),0 1px 6px rgba(0,0,0,.45) inset;
    border: none;
    
    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 {
    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;
    }
}

(今天码字累了,解释明天再上(bushi),先贴代码

$(function () {
    load();
    $('#title').on('keydown', function (event) {
        if (event.keyCode === 13 && $(this).val() !== '') {
            var local = getDate();
            local.push({
                title: $(this).val(),
                done: false
            });
            saveDate(local);
            load();
            $(this).val('');
        }
    });
    function saveDate(local) {
        localStorage.setItem('todolist', JSON.stringify(local));
    }
    $('ol,ul').on('click', 'a', function () {
        var data = getDate();
        var _index = $(this).attr('id');
        data.splice(_index, 1);
        saveDate(data);
        load();
    })
    $('ol,ul').on('click', 'input', function () {
        var data = getDate();
        var _index = $(this).siblings('a').attr('id');
        data[_index].done = $(this).prop('checked');
        saveDate(data);
        load();
    })
    function getDate() {
        var data = localStorage.getItem('todolist');
        if (data !== null) {
            return JSON.parse(data);
        }
        else {
            return [];
        }
    }
    function load() {
        var data = getDate();
        // console.log(data);
        $('ol').empty();
        $('ul').empty();
        var todoCount=0,doneCount=0;
        $.each(data, function (i, n) {
            if (data[i].done === true) {
                doneCount++;
                $('ul').prepend('
' + n.title + '
 + i + '>
');
            }
            else {
                todoCount++;
                $('ol').prepend('
' + n.title + '
 + i + '>
');
            }
            // console.log(n);
        })
        $('#todoCount').text(todoCount);
        $('#doneCount').text(doneCount);
    }
})