js localStorage实现简易todolist网页

最新推荐文章于 2022-06-26 08:41:35 发布

莪湜受ξε鬺旳兲使

最新推荐文章于 2022-06-26 08:41:35 发布

阅读量121

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_44827640/article/details/120868391

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html

<body>
    <div id="add">
        <input type="search" name="" id="search">
    </div>
    <h1>todoList</h1>
    <div id="todoList">
        <p></p>
        <ul id="todoUl"></ul>
    </div>
    <div id="doneList">
        <p></p>
        <ul id="doneUl"></ul>
    </div>
    <div class="clear">
        <span id="clear">清除</span>
    </div>
</body>

    window.onload = function () {
        let ls = localStorage;
        let i = 0, j = 0;
        let search = document.getElementById('search');//搜索框
        let todoUl = document.getElementById('todoUl');//todoUl
        let doneUl = document.getElementById('doneUl');//doneUl
        let p = document.getElementsByTagName('p');//数字提示
        let clear = document.getElementById('clear');//清除
        if (ls.getItem('todoList')) {
            let arr = JSON.parse(ls.getItem('todoList'));
            arr.forEach(el => {
                //将arr 的内容加入 todoUl
                i++;
                todoUl.innerHTML += '<li><input type="checkbox" name="" id=""><span>' + el + '</span></li>';
            });
        }
        if (ls.getItem('doneList')) {
            let arr = JSON.parse(ls.getItem('doneList'));
            arr.forEach(el => {
                //将arr 的内容加入 doneUl
                j++;
                doneUl.innerHTML += '<li><input type="checkbox" name="" id=""><span>' + el + '</span></li>';
            });
        }
        p[0].innerHTML = i;
        p[1].innerHTML = j;
        search.addEventListener('keydown', function (ev) {
            //输入框按下enter
            if (ev.keyCode === 13) {
                let addContent = search.value;

                todoUl.innerHTML += '<li><input type="checkbox" name="" id=""><span>' + addContent + '</span></li>';
                search.value = '';
                p[0].innerHTML = ++i;
                //获取todoUl 下的span
                let lis = todoUl.getElementsByTagName('span');
                let arr = Array.from(lis);
                arr = arr.map(el => el.innerHTML);
                //将内容加入localStorage
                ls.setItem('todoList', JSON.stringify(arr));
            }
        });
        //复选框切换
        document.addEventListener('click', function (ev) {
            if (ev.target.type === 'checkbox') {
                if (ev.target.parentNode.parentNode == todoUl) {
                    doneUl.appendChild(todoUl.removeChild(ev.target.parentNode));
                    p[1].innerHTML = ++j;
                    p[0].innerHTML = --i;
                } else {
                    todoUl.appendChild(doneUl.removeChild(ev.target.parentNode));
                    p[1].innerHTML = --j;
                    p[0].innerHTML = ++i;
                }
                let tLis = todoUl.getElementsByTagName('span');
                let arrT = Array.from(tLis);
                arrT = arrT.map(el => el.innerHTML);
                let dLis = doneUl.getElementsByTagName('span');
                let arrD = Array.from(dLis);
                arrD = arrD.map(el => el.innerHTML);
                //将内容加入localStorage
                ls.setItem('todoList', JSON.stringify(arrT));
                ls.setItem('doneList', JSON.stringify(arrD));
            }
        });
        //清除列表
        clear.addEventListener('click', function () {
            i = 0, j = 0;
            p[0].innerHTML = i;
            p[1].innerHTML = j;
            todoUl.innerHTML = '';
            doneUl.innerHTML = '';
            ls.removeItem('doneList');
            ls.removeItem('todoList');
        });
    }

css设计样式

    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        background: #ccc;

    }

    h1 {
        margin: 0 auto;
        text-align: center;
    }

    #todoList,
    #doneList {
        position: relative;
        margin: 0 auto;
        width: 500px;
        min-height: 100px;
    }

    p {
        position: absolute;
        right: 10%;
        top: 0;
        width: 20px;
        text-align: center;
        font-size: 16px;
        color: #666;
        height: 20px;
        background: #fff;
        border-radius: 50%;
    }

    ul {
        overflow: hidden;
    }

    li {
        margin: 30px auto 0;
        background: rgb(230, 230, 230);
        list-style: none;
        height: 50px;
        width: 400px;
        border-radius: 6px;
        box-sizing: border-box;
        padding-top: 10px;
        border-left: 6px solid rgb(82, 207, 82);
    }

    #add {
        width: 100%;
        height: 50px;
        background: grey;
        text-align: center;
        padding-top: 10px;
        box-sizing: border-box;
    }

    input[type='search'] {
        height: 30px;
        width: 250px;
        border-radius: 10px;
        border: 1px solid #666;
    }

    #doneList {
        margin-top: 20px;
    }

    input[type='checkbox'] {
        height: 25px;
        width: 25px;
        vertical-align: middle;
        margin: 0 5px;
    }

    span {
        vertical-align: middle;
        font-size: 24px;
    }

    .clear {
        color: #666;

        text-align: center;
    }

    .clear span {
        font-size: 14px;
        cursor: pointer;
        user-select: none;
    }

效果
在这里插入图片描述

莪湜受ξε鬺旳兲使

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js localStorage实现简易todolist网页

html<body> <div id="add"> <input type="search" name="" id="search"> </div> <h1>todoList</h1> <div id="todoList"> <p></p> <ul id="todoUl"></ul> &l
复制链接

扫一扫