HTML静态页面

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <div id="app">
        <div class="box">
            <h1>待办列表</h1>
            <div class="tool">
                <input autofocus="" class="userTask" type="text" placeholder="请输入代办事项" />
            </div>
            <ul>
                <li class="">
                    <div>
                        <input class="ck" type="checkbox" checked /><span class="false">写1000代码</span>
                    </div>
                    <button class="del">X</button>
                </li>
            </ul>
            <section>
                <span class="num">4 未完成</span><a href="#" class="clearTask">清理 <b>0</b> 已完成</a>
            </section>
        </div>
    </div>
    <script src="./js/index3.js"></script>
</body>

</html>

JS，通过数据操作页面元素，改变数据，本地储存，增加删除事件，删除必须通过ID来删除，不能通过索引

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

    // 获取元素
    let ul = document.querySelector('ul')
    let userTask = document.querySelector('.userTask')
    let num = document.querySelector('.num')
    let b = document.querySelector('.clearTask b')
    let clearTask = this.document.querySelector('.clearTask')


    // 模拟数据
    let data = JSON.parse(this.localStorage.getItem('shu_12'))


    // 渲染数据
    function init() {
        let htmlStr = ''
        let count = 0
        data.forEach(function (item, index) {

            if (item.state) {
                count++
            }
            htmlStr += `
                <li class="${item.state ? 'finished' : ''}">
                    <div>              //先储存自定义ID， data-id=${item.id}，再获取，使用
                        <input class="ck"  data-id=${item.id} type="checkbox" ${item.state ? 'checked' : ''} /><span class="false">${item.task}</span>
                    </div>
                    <button class="del" data-id=${item.id}>X</button>
                </li>`

        })
        ul.innerHTML = htmlStr
        b.innerHTML = count
        num.innerHTML = `${data.length - count} 未完成`
    }
    init()
    clear()
    save()

    // 键盘按下确认键增加
    userTask.addEventListener('keydown', function (e) {
         //判断是不是确认键才触发事件
        if (e.key == 'Enter') {
            let obj = {
                id: data.length > 0 ? data[data.length - 1].id + 1 : 1,
                state: false,
                task: userTask.value
            }
            data.push(obj)
        }
        init()
        clear()
        save()
    })

    // 删除
    ul.addEventListener('click', function (e) {
              //判断是不是del才触发事件
              //一个就使用className，有多个就使用classList
        if (e.target.className == 'del') {
             // 先储存ID，在获取ID，用ID来删除
            let id = e.target.dataset.id
            data.forEach(function (v, i) {
                
                if (v.id == id) {
                    data.splice(i, 1)
                    init()
                    clear()
                    save()
                }
            })
        } else if (e.target.className == 'ck') {
            let id = e.target.dataset.id
            data.forEach(function (v, i) {

                if (v.id == id) {
                    v.state = !v.state
                    init()
                    clear()
                    save()
                }
            })
        }


    })
    // 清理已完成
    function clear() {
        clearTask.addEventListener('click', function () {
            data = data.filter(function (v) {
                return !v.state
            })
            init()
            save()
        })
    }

    // 本地存储
    function save() {
        localStorage.setItem('shu_12', JSON.stringify(data))
    }
})

今日待办小案例，操控数据改变页面元素

HTML静态页面

JS，通过数据操作页面元素，改变数据，本地储存，增加删除事件，删除必须通过ID来删除，不能通过索引