js实现todolist总结

首先在网页布局设置好的情况下,进行js文件的编写,要求实现增加,删除,和实时变化,其实这都可以在存在浏览器的本地存储中。下面先列出我的html页面及css文件内容




    
    
    


ToDoList

  • 全部任务
  • 未完成
  • 已完成
*{
    margin:0;
    padding:0;
    list-style:none;
}
header{
    height: 80px;
    width: 1200px;
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    border-bottom: 1px solid #666666;
}
header p{
    position: absolute;

    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.tab{
    width: 600px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    height: 20px;
    position: absolute;
    top: 100px;
    right: 0;
    left: 0;
    margin: auto;
}
.tab li{
    width: 200px;
    font-size: 20px;
    height: 20px;
    padding: 10px;
}
.hot{
    color: #FFFFFF;
    transition: all 1s;
}
li.hot:nth-child(1)~ .top1{
    transform: translate(0,0);
}
li.hot:nth-child(2)~ .top1{
    transform: translate(100%,0);
}
li.hot:nth-child(3)~ .top1{
    transform: translate(200%,0);
}
.top1{
    width: 200px;
    height: 30px;
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    z-index: -1;
    background: #34aadc;
    transition: all ease-in 0.5s;
}
.content{
    width: 600px;
    flex-direction: column;
    height: auto;
    position: absolute;
    top: 130px;
    right: 0;
    left: 0;
    margin: auto;
}
.content li{
    padding: 10px;
}
.content p{
    display: inline-block;
}
.content time{
    float: right;
}
.content del{
    margin-left: 20px;
    float: right;
    text-decoration: none;
}
.content del:hover{
    cursor: pointer;
}

form{
    position: relative;
    top: 30px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.input_text{
    width: 400px;
    height: 36px;
    padding: 0 0 0 10px;
    outline: none;
}
.submit_button{
    height: 40px;
    width: 80px;
    background: transparent;
    border: 1px solid #666666;
    outline: none;
}

大家可以看到我这里定义了一个页面内并没有的类,这是为了在后面通过js进行添加删除的操作,实现页面内样式的变换

首先获取顶部标题

let title = document.querySelectorAll('.tab>li');

 然后添加删除和增加hot类的事件

title.forEach((ele,index) => {
        ele.onclick = function () {
            title[prev].classList.remove('hot');
            this.classList.add('hot');
            prev = index;
        }
    });

 

接下来,进行js文件的编写

首先,添加事件

window.addEventListener('load',function () {})

然后获取页面的内元素,我们先进行页面内列表的实时变化,也就是对勾选框添加事件,

1.获取页面元素,并定义要显示的列表


    let contents = document.querySelector('.content');

    let prev =0;
    


//这里添加的是要显示到页面内的列表元素
    let todolist =[
        {
            id:1, content:'放假好好睡一觉',ctime:'2019.06.08',status:false
        },
        {
            id:2, content:'放假好好睡两觉',ctime:'2019.06.09',status:false
        },
        {
            id:3, content:'不睡觉',ctime:'2019.06.07',status:true
        },
        {
            id:4, content:'学习',ctime:'2019.06.06',status:true
        }

    ];

2.因为我们网页上有三个分类,分别为所有(all),未完成(left),和已完成(done),所以我们要进行元素的筛选,即在点击各个标题时,进行数据的筛选,这里我们用各类的type作为筛选的 标准

所以在标题点击的事件title.onclick中增加type的定义

            type = this.getAttribute('type');

首先定义一个filterdata函数,对传进去的列表进行筛选,并返回数据

 function  filterdata(type){
        let arr = [];
        switch(type){
            case 'all':
                arr = todolist;
                break;
            case 'done':
                arr = todolist.filter(function (ele) {return ele.status});
                break;
            case 'left':
                arr = todolist.filter(function (ele) {return !ele.status});
                break;
        }

        return arr;
    }

3.然后我们要对筛选出来的数据进行‘渲染’操作,

这里我们需要定义一个 render函数,通过status不同对勾选框进行不同的定义

 function render(arr) {
        let html = '';
        arr.forEach(function (elem) {
            if(elem.status){
                html +=`
                    
  • ${elem.content}

    X
  • `; }else{ html +=`
  • ${elem.content}

    X
  • `; } }); contents.innerHTML = html; }

    到这里我们就实现了页面内,通过点击标题,显示不同的待办事项,即分出未完成和完成的列表。

    接下来就是对页面勾选和删除状态进行实时的渲染

    我们对列表内容增加一个点击事件,

    contents.onclick = function(e){
        let target = e.target;
        let arr = todolist;
        let id = target.parentNode.id;
        if (target.nodeName === "INPUT") {
            let a = arr.filter(ele=>ele.id == id)[0];
            a.status=target.checked;
        } else if (target.nodeName === "DEL") {
            let index = arr.findIndex(ele => ele.id == id);
            arr.splice(index, 1);
        }
        render(filterdata(type));
     };

     这段函数就是当列表内容点击时,判断点击的是勾选框还是删除,如果是勾选框,选出相应的id对应的内容,并修改其status状态,如果是del,则对该条内容进行删除操作。,最后别忘了对新的列表进行筛选显示

    还要对渲染列表中的li增加一个id属性

    function render(arr) {
            let html = '';
            arr.forEach(function (elem) {
                if(elem.status){
                    html +=`
                        
  • //这里增加了id属性

    ${elem.content}

    X
  • `; }else{ html +=`
  • //这里增加了id属性

    ${elem.content}

    X
  • `; } }); contents.innerHTML = html; }

    4.接下来就是增加操作,先进行增加函数的编写

    function createObj(){
            let id = todolist[todolist.length-1].id+1;
            let content = input_content.value;
            let ctime = new Date().toLocaleDateString();
            let status = false;
            return {id,content,ctime,status};
        }

    定义新增加的各个元素,并返回相应的值。

    然后给提交按钮增加点击事件,并去掉默认行为,增加之后别忘了‘渲染一下’

     let forms = document.forms[0];
        let input_content = forms.elements['content'];
        let input_submit = forms.elements[1];
    
        input_submit.onclick = function(e){
            e.preventDefault();
            let obj = createObj();
            todolist.push(obj);
            forms.reset();
            render(filterdata(type));
        };

    5.接下来就是最后一步,把增加,删除,实时状态的改变,存储到本地数据中

    先编写一个存储函数,把todolist转为字符串后存入本地数据中

      function saveData() {
            localStorage.setItem('todolist',JSON.stringify(todolist))
        }

    然后需要对todolist进行初始化一下

    let str = localStorage.getItem('todolist');
        if(!str){
            saveData();
            str = localStorage.getItem('todolist');
        }
        todolist = JSON.parse(str);

    到此,整个todolist的增删改还有存储都完成了,最后对整体的js进行查漏补缺 整理如下

    window.addEventListener('load',function () {
        let title = document.querySelectorAll('.tab>li');
        let contents = document.querySelector('.content');
    
        let prev =0;
        let todolist =[
            {
                id:1, content:'放假好好睡一觉',ctime:'2019.06.08',status:false
            },
            {
                id:2, content:'放假好好睡两觉',ctime:'2019.06.09',status:false
            },
            {
                id:3, content:'不睡觉',ctime:'2019.06.07',status:true
            },
            {
                id:4, content:'学习',ctime:'2019.06.06',status:true
            }
    
        ];
    
    
        let str = localStorage.getItem('todolist');
        if(!str){
            saveData();
            str = localStorage.getItem('todolist');
        }
        todolist = JSON.parse(str);
    
        title.forEach((ele,index) => {
            ele.onclick = function () {
                title[prev].classList.remove('hot');
                this.classList.add('hot');
                prev = index;
                type = this.getAttribute('type');
    
                render(filterdata(type));
            }
        });
    
    
        title[0].onclick();
    
    
    
        function  filterdata(type){
            let arr = [];
            switch(type){
                case 'all':
                    arr = todolist;
                    break;
                case 'done':
                    arr = todolist.filter(function (ele) {return ele.status});
                    break;
                case 'left':
                    arr = todolist.filter(function (ele) {return !ele.status});
                    break;
            }
    
            return arr;
        }
        //添加///
        let forms = document.forms[0];
        let input_content = forms.elements['content'];
        let input_submit = forms.elements[1];
    
        input_submit.onclick = function(e){
            e.preventDefault();
            let obj = createObj();
            todolist.push(obj);
            forms.reset();
            render(filterdata(type));
            saveData();
        };
        ///saveDATA
        function saveData() {
            localStorage.setItem('todolist',JSON.stringify(todolist))
        }
    
    
    
    
        function createObj(){
            let id = todolist[todolist.length-1].id+1;
            let content = input_content.value;
            let ctime = new Date().toLocaleDateString();
            let status = false;
            return {id,content,ctime,status};
        }
        ///修改状态///
        /*
            视图->数据
            li ->数组元素
            复选框 ->数组元素status (li->id)
    
         */
    contents.onclick = function(e){
        let target = e.target;
        let arr = todolist;
        let id = target.parentNode.id;
        if (target.nodeName === "INPUT") {
            let a = arr.filter(ele=>ele.id == id)[0];
            a.status=target.checked;
        } else if (target.nodeName === "DEL") {
            let index = arr.findIndex(ele => ele.id == id);
            arr.splice(index, 1);
        }
        saveData();
        render(filterdata(type));
     };
    
    
        /渲染/
    
        function render(arr) {
            let html = '';
            arr.forEach(function (elem) {
                if(elem.status){
                    html +=`
                        
  • ${elem.content}

    X
  • `; }else{ html +=`
  • ${elem.content}

    X
  • `; } }); contents.innerHTML = html; } })

     

     

    你可能感兴趣的:(js,前端,js,todolist)