（前端手撕）10. 手写一个todolist

手写一个todolist

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>

<body>
    <h1>todolist</h1>
    <input type="text">
    <ul>

        <ul>
            <script>
                var oInput = document.getElementsByTagName("input")[0];

                oInput.onkeydown = function (event) {

                    var event = event || window.event;
                    if (event.keyCode == 13) {

                        var data = this.value;
                        // 去空格判断是否有数据
                        if (data.trim().length > 0) {
                             // 添加数据
                            addData(data);
                            // 清空数据
                            clearData();
                        }

                    }
                }

                // 模糊查询
                oInput.oninput = function () {
                    var arrLi = document.getElementsByTagName("li");
                    var arr = [];

                    for (var i = 0; i < arrLi.length; i++) {
                        if (arrLi[i].firstChild.innerHTML.trim().indexOf(this.value.trim()) != -1) {
                            arr.push(i);
                        }
                    }
                    // show
                    show(arr);
                };


                function show(arr) {
                    var arrLi = document.getElementsByTagName("li");
                    // 隐藏所有
                    for (var i = 0; i < arrLi.length; i++) {
                        arrLi[i].style.display = "none";
                    }

                    // 显示
                    if (arr.length > 0) {
                        for (var i = 0; i < arr.length; i++) {
                            arrLi[arr[i]].style.display = "block";
                        }
                    } else {
                        for (var i = 0; i < arrLi.length; i++) {
                            arrLi[i].style.display = "block";
                        }
                    }

                }

                function addData(data) {
                    var tempLi = document.createElement("li");
                    var tempBtn = document.createElement("button");
                    var tempSpan = document.createElement("span");
                    var oUl = document.getElementsByTagName("ul")[0];

                    tempBtn.innerHTML = "delete";
                    tempBtn.name = "delete";
                    tempSpan.innerHTML = data;
                    tempLi.appendChild(tempSpan);
                    tempLi.appendChild(tempBtn);
                    oUl.appendChild(tempLi);
                }

                function clearData() {
                    var oInput = document.getElementsByTagName("input")[0];

                    // 不能用innerHTML
                    oInput.value = "";
                }

                // 点击删除
                var oUl = document.getElementsByTagName("ul")[0];
                oUl.onclick = function (event) {
                    var event = event || window.event;
                    var target = event.target;

                    if (target.name == "delete") {
                        target.parentNode.parentNode.removeChild(target.parentNode);
                    }
                };

            </script>
</body>

</html>