js實現(xiàn)奇妙清單

簡易事件待辦程序助析，按下回車即添加事件掘譬，勾選方框即跳至完成或進行的事件。純js原生代碼

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件待辦</title>
    <link rel="stylesheet" >
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: rgb(182, 182, 182);
        }

        .w {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .top p {
            font-size: 40px;
            color: white;
            line-height: 50px;
            padding: 18px 0;
            margin-left: 20px;
        }

        .top {
            background-color: rgb(42, 42, 42);
        }

        .top input {
            float: right;
        }

        .top .input {
            width: 500px;
            height: 40px;
            border: 1px solid black;
            position: absolute;
            top: 21px;
            right: 50px;
            background-color: white;
            border-radius: 9px;
            box-shadow: 2px 2px 8px 1px;
        }

        .top .input input {
            width: 500px;
            height: 40px;
            border: 0;
            background-color: rgba(0, 0, 0, 0);
            outline: none;
            text-indent: 15px;
            font-size: 20px;
        }

        .title {
            font-size: 40px;
            margin-top: 30px;
        }

        .title p {
            margin-left: 20px;
            margin-bottom: 35px;
        }

        .finish {
            margin-top: 40px;
        }

        .num {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgb(164, 219, 159);
            position: absolute;
            top: 0;
            right: 20px;
            line-height: 40px;
            text-align: center;
            font-size: 25px;
        }

        .clearEvery {
            font-size: 24px;
            color: rgb(109, 109, 109);
            margin: 50px auto;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .active {
            height: 55px;
            border-left: 8px solid rgb(42, 207, 130);
            border-radius: 6px;
            background-color: white;
            line-height: 55px;
            font-size: 30px;
            text-indent: 20px;
            margin-bottom: 15px;
        }

        .title i {
            font-size: 30px;
            cursor: pointer;
        }

        .title .del {
            float: right;
            margin-right: 20px;
            font-size: 15px;
            cursor: pointer;
        }

        .finish .finishEvent {
            height: 55px;
            border-left: 8px solid rgb(124, 124, 124);
            border-radius: 6px;
            background-color: rgb(219, 219, 219);
            line-height: 55px;
            font-size: 30px;
            text-indent: 20px;
            margin-bottom: 15px;
            color: rgb(97, 97, 97);
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="w">
            <p>ToDoList</p>
            <div class="input">
                <input type="text" placeholder="添加ToDo">
            </div>
        </div>
    </div>
    <div class="title">
        <div class="w">
            <p>正在進行</p>
            <p class="num count">0</p>
            <ul class="newEvent">
                <!-- <li class="active"><i class="iconfont icon-xuanzekuang"></i><span class="new1">吃飯</span><span
                        class="del">刪除</span></li> -->
            </ul>
        </div>
    </div>
    <div class="title">
        <div class="w">
            <p>已經完成</p>
            <p class="num count2">0</p>
            <ul class="finish">
                <!-- <li class="finishEvent"><i class="iconfont icon-xuanzekuanghou"></i><span class="new1">吃飯</span><span
                        class="del">刪除</span></li> -->
            </ul>
        </div>
    </div>
    <div class="clearEvery">clear</div>
</body>
<script>
    function ToDo() {
        this.input = document.querySelector('input');
        this.i = 1;
        this.reg = /^\s+$/;//判斷是否為空格字符串
        this.newEvent = document.querySelector('.title .newEvent');
        this.countnum = document.querySelector('.title .count');
        this.clearBtn = document.querySelector('.clearEvery');
        this.finish = document.querySelector('.finish');
        this.countnum2 = document.querySelector('.title .count2');
    }

    ToDo.prototype.init = function () {
        this.click();
        this.clearBtn1();
        this.clearBtn2();
        this.clearEvery();
        window.onkeydown = (ev) => {
            var ev = ev || window.event;
            if (ev.keyCode === 13) {//判斷鍵盤事件是否為按下空格
                if (this.input.value !== '') {//判斷input表單中是否輸入了內容
                    if (this.reg.test(this.input.value)) {//判斷init中的正則 為攔截輸入為空格字符
                        console.log(`含有空格，已攔截輸出`);
                        this.clear();
                    } else {
                        this.addEvent();
                        this.clear();
                        let num = this.i++;
                        console.log(`成功輸出${num}次`);

                        this.clearBtn1();//刪除按鈕
                        this.clearBtn2();
                    }
                } else {
                    throw new Error('表單內容不能為空');
                }
            }
        }
    }

    ToDo.prototype.addEvent = function () {//添加事件
        let li = document.createElement('li');
        let lis = document.querySelectorAll('.title .newEvent li');
        let index = document.querySelectorAll('.title .newEvent .active i');
        if (index.length > 0) {//判斷當前的列表插入問題荆永，后添加的在上面
            this.newEvent.insertBefore(li, lis[0]);
        } else {
            this.newEvent.appendChild(li);
        }
        li.className = 'active';
        li.innerHTML = `
        <i class="iconfont icon-xuanzekuang"></i>
        <span>${this.input.value}</span>
        <span class="del">刪除</span>`;
        this.click();
        this.count();
    }

    ToDo.prototype.click = function () {//正在進行的點擊事件
        let _this = this;
        let index = document.querySelectorAll('.title .newEvent .active i');
        for (let i = 0; i < index.length; i++) {
            index[i].onclick = function () {
                // this.parentNode.children[1].innerText
                let li = document.createElement('li');
                let lis = document.querySelectorAll('.title .finish li');
                let index = document.querySelectorAll('.title .finish .finishEvent i');

                if (index.length > 0) {//判斷當前的列表插入問題朝捆，后添加的在上面
                    _this.finish.insertBefore(li, lis[0]);
                } else {
                    _this.finish.appendChild(li);
                }
                li.className = 'finishEvent';
                li.innerHTML = `
                <i class="iconfont icon-xuanzekuanghou"></i>
                <span>${this.parentNode.children[1].innerText}</span>
                <span class="del">刪除</span>`;

                _this.newEvent.removeChild(this.parentNode);

                _this.count();
                _this.finishCount();

                _this.finishClick();
                _this.clearBtn1();
                _this.clearBtn2();
            }
        }
    }

    ToDo.prototype.finishClick = function () {
        let _this = this;
        let index = document.querySelectorAll('.title .finish .finishEvent i');
        for (let i = 0; i < index.length; i++) {
            index[i].onclick = function () {
                // this.parentNode.children[1].innerText
                let li = document.createElement('li');
                let lis = document.querySelectorAll('.title .newEvent li');
                let index = document.querySelectorAll('.title .newEvent .active i');

                if (index.length > 0) {//判斷當前的列表插入問題般渡，后添加的在上面
                    _this.newEvent.insertBefore(li, lis[0]);
                } else {
                    _this.newEvent.appendChild(li);
                }
                li.className = 'active';
                li.innerHTML = `
                <i class="iconfont icon-xuanzekuang"></i>
                <span>${this.parentNode.children[1].innerText}</span>
                <span class="del">刪除</span>`;

                _this.finish.removeChild(this.parentNode);

                _this.count();
                _this.finishCount();

                _this.click();
                _this.clearBtn1();
            }
        }
    }

    ToDo.prototype.clearBtn1 = function () {
        let _this = this;
        let clearBtn = document.querySelectorAll('.title .newEvent .del');

        for (let i = 0; i < clearBtn.length; i++) {
            clearBtn[i].onclick = function () {
                _this.newEvent.removeChild(this.parentNode);
                _this.count();
            }
        }
    }

    ToDo.prototype.clearBtn2 = function () {
        let _this = this;
        let clearBtn = document.querySelectorAll('.title .finish .del');

        for (let i = 0; i < clearBtn.length; i++) {
            clearBtn[i].onclick = function () {
                _this.finish.removeChild(this.parentNode);
                _this.finishCount();
            }
        }
    }

    ToDo.prototype.count = function () {//進行計數(shù)
        this.countnum.innerHTML = document.querySelectorAll('.title .newEvent li').length;
    }

    ToDo.prototype.finishCount = function () {//已完成計數(shù)
        this.countnum2.innerHTML = document.querySelectorAll('.title .finish li').length;
    }

    ToDo.prototype.clear = function () {
        this.input.value = '';
    }

    ToDo.prototype.clearEvery = function () {
        let _this = this;
        this.clearBtn.onclick = () => {
            if (confirm('點擊"確定"將清空全部列表')) {
                let lis = document.querySelectorAll('.title .newEvent li');
                for (let i = 0; i < lis.length; i++) {
                    _this.newEvent.removeChild(_this.newEvent.children[0]);
                }
                _this.count();
                let lis2 = document.querySelectorAll('.title .finish li');
                for (let i = 0; i < lis2.length; i++) {
                    _this.finish.removeChild(_this.finish.children[0]);
                }
                _this.finishCount();
            }
        }
    }

    new ToDo().init();
</script>

</html>