ToDoList的实现

最新推荐文章于 2024-08-22 19:01:59 发布

独鹿DT

最新推荐文章于 2024-08-22 19:01:59 发布

阅读量1.7k

点赞数 6

分类专栏：网页小Demo 文章标签： todolist ToDoList 前端 css js

本文链接：https://blog.csdn.net/weixin_47529373/article/details/118643726

版权

网页小Demo 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

ToDoList的实现

效果图

需要有一个输入框，可以输入文本并添加到今日计划中
.可以将今日计划勾选完成
.可以删除指定的计划
数据实现持久化，避免浏览器刷新后数据不丢失

部分代码还是一样的，我就没提取出去做一个单独的函数了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        
        body {
            user-select: none;
            background-color: #CDCDCD;
        }
        
        ul {
            list-style: none;
        }
        
        header {
            height: 62px;
            background-color: #323232;
        }
        
        .heart {
            width: 650px;
            margin: 0 auto;
        }
        
        .head {
            display: flex;
            justify-content: space-between;
            padding-top: 15px;
        }
        
        .head h2 {
            color: #fff;
        }
        
        .head input {
            width: 400px;
            height: 30px;
            border-radius: 5px;
            padding-left: 10px;
            font-size: 15px;
            outline: none;
        }
        
        .doing,
        .finshed {
            margin-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
        }
        
        .doing h2,
        .finshed h2 {
            font-size: 25px;
            font-weight: 700;
        }
        
        .doing span,
        .finshed span {
            margin-right: 10px;
            padding: 2px 8px;
            color: #666;
            border-radius: 50%;
            background-color: #E6E6FA;
        }
        
        .doing_ul,
        .finshed_ul {
            margin-top: 10px;
        }
        
        .doing_ul li,
        .finshed_ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 35px;
            border-radius: 5px;
            line-height: 35px;
            margin-bottom: 10px;
        }
        
        .doing_ul li {
            background-color: #fff;
            border-left: 5px solid #629A9C;
        }
        
        .finshed_ul li {
            background-color: #E6E6E6;
            border-left: 5px solid #B3B3B3;
            color: #7E7E7E;
        }
        
        .doing_ul li input,
        .finshed_ul li input {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 10px;
            vertical-align: middle;
        }
        
        .doing_ul li i,
        .finshed_ul li i {
            display: inline-block;
            width: 20px;
            height: 17px;
            background-color: #CCC;
            margin-right: 20px;
            border-radius: 8px;
            border: 2px solid #8BB2E0;
        }
    </style>
</head>

<body>
    <header>
        <div class="heart head">
            <h2>ToDoList</h2>
            <input type="text" placeholder="添加todo" id="uploadThings">
        </div>
    </header>
    <section>
        <div class="doing heart">
            <h2>正在进行</h2> <span>0</span>
        </div>
        <ul class="doing_ul heart">
        </ul>
        <div class="finshed heart">
            <h2>已经完成</h2><span>0</span>
        </div>
        <ul class="finshed_ul heart">
        </ul>
    </section>
    <script>
        const uploadThings = document.querySelector('#uploadThings');
        const doingNum = document.querySelector('.doing span');
        const finshNum = document.querySelector('.finshed span');
        const doing_ul = document.querySelector('.doing_ul');
        const finshed_ul = document.querySelector('.finshed_ul');

        let doingList = [];
        let finshedList = [];
        getLocalStorage();

        function saveInfo() {
            localStorage.setItem('doing', JSON.stringify(doingList))
            localStorage.setItem('finshed', JSON.stringify(finshedList))
        }

        function getLocalStorage() {
            doingList = JSON.parse(localStorage.getItem('doing'));
            finshedList = JSON.parse(localStorage.getItem('finshed'));
            if (!doingList) {
                doingList = []
            }
            if (!finshedList) {
                finshedList = []
            }
            for (let title of doingList) {
                const li = document.createElement('li');
                li.innerHTML = `<div>
                  <input type="checkbox"><span>${title}</span></div> <i></i>
                  </div>`;
                doing_ul.insertBefore(li, doing_ul.children[0]);
                doingNum.innerHTML = parseInt(doingNum.innerHTML) + 1;
            }
            for (let title of doingList) {
                const li = document.createElement('li');
                li.innerHTML = `<div>
                  <input type="checkbox"><span>${title}</span></div> <i></i>
                  </div>`;
                finshed_ul.insertBefore(li, finshed_ul.children[0]);
                finshNum.innerHTML = parseInt(finshNum.innerHTML) + 1;
            }
        }


        uploadThings.addEventListener('keyup', e => {
            if (e.keyCode === 13) {
                const li = document.createElement('li');
                li.innerHTML = `<div>
                  <input type="checkbox"><span>${uploadThings.value}</span></div> <i></i>
                  </div>`;
                doing_ul.insertBefore(li, doing_ul.children[0]);
                doingNum.innerHTML = parseInt(doingNum.innerHTML) + 1;
                console.log(uploadThings.value);
                doingList.unshift(uploadThings.value);
                saveInfo();
                uploadThings.value = "";

            }
        });
        doing_ul.addEventListener('click', e => {
            if (e.target.tagName === 'INPUT') {
                finshed_ul.insertBefore(e.target.parentNode.parentNode, finshed_ul.children[0]);
                const index = doingList.indexOf(e.target.nextElementSibling.innerHTML);
                doingList.splice(index, 1);

                finshedList.unshift(e.target.nextElementSibling.innerHTML);
                saveInfo();
                doingNum.innerHTML = parseInt(doingNum.innerHTML) - 1;
                finshNum.innerHTML = parseInt(finshNum.innerHTML) + 1;
            }
            if (e.target.tagName === "I") {
                doing_ul.removeChild(e.target.parentNode);
                const index = doingList.indexOf(e.target.previousElementSibling.children[1].innerHTML);
                doingList.splice(index, 1);
                saveInfo();
                doingNum.innerHTML = parseInt(doingNum.innerHTML) - 1;
            }
        });
        finshed_ul.addEventListener('click', e => {
            if (e.target.tagName === 'INPUT') {
                doing_ul.appendChild(e.target.parentNode.parentNode, doing_ul.children[0]);

                const index = doingList.indexOf(e.target.nextElementSibling.innerHTML);

                finshedList.splice(index, 1);
                doingList.unshift(e.target.nextElementSibling.innerHTML);
                saveInfo();
                doingNum.innerHTML = parseInt(doingNum.innerHTML) + 1;
                finshNum.innerHTML = parseInt(finshNum.innerHTML) - 1;
            }
            if (e.target.tagName === "I") {
                finshed_ul.removeChild(e.target.parentNode);

                const index = finshedList.indexOf(e.target.previousElementSibling.children[1].innerHTML);
                finshedList.splice(index, 1);
                saveInfo();
                finshNum.innerHTML = parseInt(finshNum.innerHTML) - 1;
            }
        });
    </script>
</body>

</html>