使用JS制作简易待办事项

效果：

HTML结构：

<div id="app"> <div class="box"> <h1>待办列表</h1> <div class="tool"> <input autofocus="" class="userTask" type="text" placeholder="请输入代办事项" /> </div> <ul> <li class="finished"> <div> <input class="ck" type="checkbox" /><span class="false" >任务名称</span > </div> <button class="del">X</button> </li> </ul> <section> <span class="unDone">4 未完成</span><a href="#" class="clear">清理 <b class="Done">0</b> 已完成</a> </section> </div> </div>

CSS样式：

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ccc; } ul { list-style: none; } li { padding: 20px; text-align: left; font-size: 30px; border-bottom: 1px dashed #ccc; display: flex; justify-content: space-between; align-items: center; } li input { margin-right: 10px; } li button { display: none; padding: 5px; } li:hover button { display: inline-block; cursor: pointer; } .finished { text-decoration: line-through; } h1 { margin-bottom: 10px; } .box { background-color: #fff; width: 60vw; padding: 20px 20px 0; margin: 50px auto; } .box .tool input { width: 100%; height: 50px; text-indent: 20px; font-size: 20px; font-style: italic; color: #666; font-weight: 700; } section { height: 50px; display: flex; justify-content: space-between; align-items: center; } a { text-decoration-color: #666; color: inherit; }

JS部分：

//给window添加事件
window.addEventListener('load', function () {
    //获取元素
    let userTask = document.querySelector('.userTask')
    let ul = document.querySelector('ul')
    let clear = document.querySelector('.clear')
    let unDone = document.querySelector('.unDone')
    let Done = document.querySelector('.Done')


    // 模拟数据源
    // let datas = [{state:true,content:'abcd',id:1}]
    //本地存储
    let datas = JSON.parse(localStorage.getItem('todoList')) || []

    //数据渲染
    function init() {
        let htmlStr = ''
        datas.forEach(function (v) {
            htmlStr += `<li class="${v.state ? "finished" : ""}">
                            <div>
                            <input class="ck" type="checkbox" ${v.state ? "checked" : ''}  data-id = "${v.id}"/><span class="false"
                                >${v.content}</span
                            >
                            </div>
                            <button class="del" data-id = "${v.id}">X</button>
                        </li>`

        })
        calculateDone()
        ul.innerHTML = htmlStr
        localStorage.setItem('todoList', JSON.stringify(datas))
        userTask.value = ''
    }

    init()

    //新增代办
    userTask.addEventListener('keydown', function (e) {

        if (e.which == 13) {
            if (userTask.value) {
                let obj = {
                    state: false,
                    content: userTask.value,
                    id: datas.length > 0 ? datas[datas.length - 1].id + 1 : 1
                }
                datas.push(obj)
                init()
            } else {
                alert('请您输入内容')
            }
        }

    })


    //计算Done
    function calculateDone() {
        let count = 0
        for (let i = 0; i < datas.length; i++) {
            if (datas[i].state) {
                count++
            }
        }
        unDone.innerText = datas.length - count + ' 未完成'
        Done.innerText = count
    }
    //清理已完成
    clear.addEventListener('click', function () {
        datas = datas.filter(function (v) {
            return !v.state
        })
        init()
    })


    //选择框
    ul.addEventListener('click', function (e) {
        // 复选框
        if (e.target.className == 'ck') {
            let id = e.target.dataset.id
            datas.forEach(function (v, i) {
                if (v.id == id) {
                    datas[i].state = !datas[i].state
                    init()
                }
            })
        }
        //删除
        else if (e.target.className == 'del') {
            let id = e.target.dataset.id
            datas.forEach(function (v, i) {
                if (v.id == id) {
                    datas.splice(i, 1)
                    init()
                }
            })
        }
    })
})