todoList

最新推荐文章于 2024-01-02 22:20:33 发布

lanfuA

最新推荐文章于 2024-01-02 22:20:33 发布

阅读量120

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lanfuA/article/details/108468033

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

todoList 效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <script src="js/lcXys.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/basd.css">
    <link rel="stylesheet" href="css/todolist.css">
</head>

<body>
    <div class="main">
        <div class="header">
            <div class="logo">LcTodo</div>
            <input type="text" id="input" placeholder="请输入待办事项" />
        </div>
        <div class="doing todo ">
            <h3><span class="title">正在进行</span><span class="num"></span></h3>
            <div class="list ">

            </div>
        </div>
        <div class="done todo ">
            <h3><span class="title">已经完成</span><span class="num"></span></h3>
            <div class="list">
                <!-- <div class="todoItem ">
                    <input type="checkbox " checked="checked ">
                    <div class="content ">今晚吃夜宵</div>
                    <div class="del ">删除</div>
                </div> -->
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    // 
    //设定1个全局变量,将待办事项保存到这个变量
    if (localStorage.todoList == undefined) {
        var todoList = []
    } else {
        //将json格式的字符串转为对象
        var todoList = JSON.parse(localStorage.todoList)
            // render(todoList)
    }



    // 
    var doingListDiv = document.querySelector(".doing .list")
        //获取done list对象
    var doneListDiv = document.querySelector(".done .list")
    var mainDiv = document.querySelector(".main")

    var inputDom = document.querySelector("#input");

    inputDom.onkeydown = function(event) {
            if (event.key == "Enter") {
                console.log(event);
                var value = inputDom.value;
                var obj = {
                    content: value,
                    isDone: false,
                }
                todoList.push(obj)
                console.log(todoList)
                render(todoList)
            }
        }
        // 新建一个class="todoItem" 的div 

    function render(todoList) {
        //将对象转为json格式的字符串
        localStorage.todoList = JSON.stringify(todoList);
        //每一次渲染之前,清空内容

        doingListDiv.innerHTML = ""
        doneListDiv.innerHTML = ""

        todoList.forEach(function(item, index) {
            console.log(item);
            var todoItem = document.createElement("div")
            todoItem.className = "todoItem";
            console.log(item.isDone);
            if (item.isDone) {
                todoItem.innerHTML = `
						<input type="checkbox"  checked="checked" data-index="${index}">
						<div class="content"> ${ item.content}</div>
						<div class="del" data-index="${index}">删除</div>`
                doneListDiv.appendChild(todoItem)

            } else {
                todoItem.innerHTML = `
						<input type="checkbox"   data-index="${index}">
						<div class="content">${ item.content}</div>
						<div class="del" data-index="${index}">删除</div>`
                doingListDiv.appendChild(todoItem)
                    // appendChild() 方法向节点添加最后一个子节点。
            }
        })
    }
    render(todoList)
    doingListDiv.onchange = function(e) {
        var index = parseInt(e.target.dataset.index)
        todoList[index].isDone = true;
        render(todoList)
    }
    doneListDiv.onchange = function(e) {
        var index = parseInt(e.target.dataset.index)
        todoList[index].isDone = false;
        render(todoList)
    }
    mainDiv.onclick = function(e) {
        // 鼠标点击class="del"的标签时
        if (e.target.className == "del") {
            console.log(e)
            var index = parseInt(e.target.dataset.index);
            //  todoList.splice(index（索引）, 1（删除1条记录）);
            todoList.splice(index, 1);
            render(todoList)
        }

    }
</script>





</html>