原生js写todolist

最新推荐文章于 2023-03-23 21:42:34 发布
SXY0426
最新推荐文章于 2023-03-23 21:42:34 发布
阅读量223
点赞数 2
文章标签： react.js css html
本文链接：https://blog.csdn.net/qq_44383759/article/details/125158292
版权
HTML5 本地数据库待办事项安全用户界面
关键词由CSDN通过智能技术生成
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            background: #CDCDCD;
        }

        header {
            height: 50px;
            background: #333;
            background: rgba(47, 47, 47, 0.98);
        }

        section {
            margin: 0 auto;
        }

        label {
            float: left;
            width: 100px;
            line-height: 50px;
            color: #DDD;
            font-size: 24px;
            cursor: pointer;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        header input {
            float: right;
            width: 60%;
            height: 24px;
            margin-top: 12px;
            text-indent: 10px;
            border-radius: 5px;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
            border: none
        }

        input:focus {
            outline-width: 0
        }

        h2 {
            position: relative;
        }

        span {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            padding: 0 5px;
            height: 20px;
            border-radius: 20px;
            background: #E6E6FA;
            line-height: 22px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        ol,
        ul {
            padding: 0;
            list-style: none;
        }

        li input {
            position: absolute;
            top: 2px;
            left: 10px;
            width: 22px;
            height: 22px;
            cursor: pointer;
        }

        p {
            margin: 0;
        }

        li p input {
            top: 3px;
            left: 40px;
            width: 70%;
            height: 20px;
            line-height: 14px;
            text-indent: 5px;
            font-size: 14px;
        }

        li {
            height: 32px;
            line-height: 32px;
            background: #fff;
            position: relative;
            margin-bottom: 10px;
            padding: 0 45px;
            border-radius: 3px;
            border-left: 5px solid #629A9C;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
        }

        ol li {
            cursor: move;
        }

        ul li {
            border-left: 5px solid #999;
            opacity: 0.5;
        }

        li a {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            width: 14px;
            height: 12px;
            border-radius: 14px;
            border: 6px double #FFF;
            background: #CCC;
            line-height: 14px;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }

        footer {
            color: #666;
            font-size: 14px;
            text-align: center;
        }

        footer a {
            color: #666;
            text-decoration: none;
            color: #999;
        }

        @media screen and (max-device-width: 620px) {
            section {
                width: 96%;
                padding: 0 2%;
            }
        }

        @media screen and (min-width: 620px) {
            section {
                width: 600px;
                padding: 0 10px;
            }
        }
    </style>
</head>

<body>
    <header>
        <section>
            <form action="" id="form" onclick="">
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
            </form>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
    </footer>
    <script>
        window.addEventListener('load', function () {
            loading()
            var title = document.querySelector('#title')
            var ol = document.querySelector('#todolist')
            var ul = document.querySelector('#donelist')
            //获取节点
            // let title=document.getElementById('title')
            // let ol=document.getElementById('todolist')
            // let ul=document.getElementById('donelist')
            //监听title
            title.addEventListener('keydown', function (e) {
                if (e.keyCode == 13) {
                    let local = getdata();
                    const obj = {
                        'title': title.value,
                        'done': false
                    }
                    //添加的数据obj追加在当local为空数组上（调用getdata()函数返回为空数组）（此时本地存储的data数据为空）
                    local.push(obj)
                    //添加后的数组local存储到本地，调用存储数据的函数，转化为字符串
                    savedata(local)
                    //加载页面，调用loading函数，渲染页面
                    loading()
                }
            })
            //获取数据
            function getdata() {
                const data = window.localStorage.getItem('todo');
                if (data != null) {
                    return JSON.parse(data)
                } else {
                    return []
                }
            }
            //本地存储数据
            function savedata(val) {
                window.localStorage.setItem('todo', JSON.stringify(val))
            }
            //渲染数据到页面，加载页面，
            function loading() {
                //重新给ol,ul定义节点
                let ol = document.getElementById('todolist')
                let ul = document.getElementById('donelist')
                //给span标签获得节点
                let todocount = document.getElementById('todocount')
                let donecount = document.getElementById('donecount')
                let todoNum = 0
                let doneCountNum = 0
                //将渲染完的数据节点清空，添加一个数据，渲染一个，其他的数据可以复用
                var childs = ol.childNodes;
                for (var i = childs.length - 1; i >= 0; i--) {
                    ol.removeChild(childs[i]);
                }
                var childs = ul.childNodes;
                for (let i = childs.length - 1; i >= 0; i--) {
                    ul.removeChild(childs[i]);
                }
                 //将数据放到加载函数作用域里面
                //拿数据
                var data = getdata();

                // console.log(childs);
                //遍历拿到的数据渲染到页面
                data.forEach((item, index) => {
                    //在遍历的同时，生成li节点
                    var li = document.createElement('li')
                    //并且在每个li节点添加需要的三个元素节点并且给以标识
                    li.innerHTML =
                        ` <input type="checkbox"><p id="p${index}">${item.title}</p><a href="#" id="${index}"></a>`
                    //         li.innerHTML = "<input type='checkbox'/><p id='p" + index + "'>" + item.title + "</p><a href='#' id=" + index +
                    // "></a>"
                    //如果item.done==true,ul节点添加li
                    if (item.done) {
                        ul.insertBefore(li, ul.children[0]);
                        li.children[0].checked = 'checkded'
                        doneCountNum++
                    } else {
                        ol.insertBefore(li, ol.children[0]);
                        //ol里面的span的计数功能
                        todoNum++
                    }
                    //渲染计数功能的数据到对应的位置
                    todocount.innerHTML = todoNum
                    donecount.innerHTML = doneCountNum
                })
            }
            //移除数据
            function removeData() {
                ol.addEventListener("click", function (e) {
                    if (e.target.nodeName == 'A') {
                        //获取a节点的id
                        const thisIndex = e.target.getAttribute('id')
                        //获取data数组数据
                        const data = getdata()
                        data.splice(thisIndex, 1)
                        savedata(data)
                        loading()
                    }
                })
            }
            removeData()
            //编辑数据
            function edmit() {
                ol.addEventListener("click", function (e) {
                    if (e.target.nodeName == 'P') {
                        //获取p的id
                        var Pid = e.target.getAttribute('id')
                        //获得p节点，并监听
                        var paraP = document.getElementById(Pid)
                        //给p添加节点
                        var title = paraP.innerHTML
                        paraP.innerHTML = `<input type="text" id="input${Pid}" value="${title}"/>`
                        // loading()
                        //获得input节点
                        var inputObj = document.getElementById("input" + Pid)
                        console.log(inputObj);
                        //input框可选
                        inputObj.select()
                        //input框监听
                        inputObj.addEventListener('blur', function () {
                            paraP.innerHTML = inputObj.value
                            var i = Pid.substring(1)
                            var data = getdata()
                            data[i].title = paraP.innerHTML
                            savedata(data)
                            loading()
                        })
                    }
                })

            }
            edmit()


            function changedata() {
                ol.addEventListener('click', function (e) {
                    if (e.target.nodeName === 'INPUT') {
                        var index = e.target.nextElementSibling.nextElementSibling.getAttribute('id')
                        console.log(index);
                        var data = getdata()
                        data[index].done = true
                        savedata(data)
                        loading()
                    }
                })
                ul.addEventListener('click', function (e) {
                    if (e.target.nodeName === 'INPUT') {
                        //获得a的索引值，单击事件
                        var index = e.target.nextElementSibling.nextElementSibling.getAttribute('id')
                        console.log(index);
                        var data = getdata()
                        data[index].done = false
                        savedata(data)
                        loading()
                    }
                })
            }
            changedata()
        })
    </script>
</body>

</html>
todolist原生写法