设计一个TODO List,使用html和css,实现添加删除模糊匹配功能_设计一个todo list,页面结构如下图所示,要求: 使用html与css完成界面开发 实现添

设计一个TODO List，页面结构如下图所示，要求：

1. 使用HTML与CSS完成界面开发
2. 实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框
3. 实现删除功能：点击列表项后面的“X”号，可以删除该项
4. 实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空
   注：以上代码实现需要能在浏览器中正常显示与执行。
   
   设置页面主题布局的代码如下:

    <h1>todos</h1>
    <div class="content">
        <div class="box">
            <span class="iconfont icon-zhankai" id="hidden"></span>
            <input type="text" id="input">
        </div>
        <div class="box2">
            <ul id="list">
                <!-- <li class="item"> -->
                <!-- <span class="infor">12232</span>
                    <span class="iconfont icon-fork" id="del"></span> -->
                <!-- </li> -->
            </ul>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

样式设计代码如下:

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #E8F0DB;
        }

        h1 {
            margin: 20px auto;
            font-size: 40px;
            text-align: center;
            color: #FF6600;
        }

        .content {
            width: 300px;
            height: 300px;
            margin: auto;
        }

        .box {
            width: 100%;
            height: 30px;
            background-color: #fff;
            border: 1px solid #FF6600;
        }

        .box>span {
            float: left;
            margin-left: 5px;
            font-size: 18px;
            line-height: 30px;
        }

        .box>input {
            float: right;
            width: 88%;
            height: 28px;
            border: none;
            outline: none;
        }

        .box2 {
            width: 100%;
        }

        .box2>#list>.item {
            width: 100%;
            height: 30px;
            color: snow;
            background-color: rgba(248, 165, 42, 0.6);
            border: 1px solid #fff;
        }

        .box2>ul>.item>.infor {
            display: inline;
            margin-left: 15px;
            font-size: 18px;
            line-height: 30px;
        }

        .box2>ul>.item>.del {
            float: right;
            margin-right: 10px;
            font-size: 20px;
            line-height: 30px;
            user-select: none;
        }

        .change {
            display: none;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

页面主体样式如下图所示:

核心js代码如下:

        let oInput = document.getElementById('input');
        let oUl = document.getElementById('list');
        let oLi = document.getElementsByClassName('item');
        let oHidden = document.getElementById('hidden');

        //添加键盘按下时间
        document.onkeydown = function (ev) {
            ev = ev || window.event;
            if (ev.keyCode === 13) {
                let value = oInput.value;
                //不输入内容的时候弹出提示框
                if (value === '') {
                    alert('请输入内容');
                } else {
                    //生成li标签以及li里的两个标签
                    let li = document.createElement('li');
                    let p = document.createElement('p');
                    let span = document.createElement('span');

                    //给标签设置类名
                    li.className = "item"
                    p.className = "infor"
                    span.className = "del"
					//向标签中添加内容
                    p.innerHTML = value;
                    span.innerHTML = "x"

                    //向li中渲染
                    li.appendChild(p);
                    li.appendChild(span);
                    //给ul中渲染内容
                    oUl.appendChild(li);
                    //设置输入框清空
                    oInput.value = '';
                    //点击x号删除
                    span.onclick = function () {
                        oUl.removeChild(this.parentNode)
                    }
					//点击展开按钮展开或隐藏
                    oHidden.onclick = function () {
                        oUl.classList.toggle('change');
                    }
                }
            }
		}
        //模糊查询
        function select() {
            oInput.addEventListener('keyup', function (e) {    //监听键盘抬起事件（所有键盘按钮）
                let str = e.target.value;
                let reg = new RegExp('(' + str + ')', 'g');          //匹配到的文字变红色，准备工作

                for (var i = 0; i < oLi.length; i++) {
                    let one = oLi[i].getElementsByTagName('p')[0];
                    let newStr = one.innerText.replace(reg, '<font color=red>$1</font>');//换-->红色，用innerText防止用innerHTML将标签也读取出来出错。
                    if (one.innerText.indexOf(str) !== -1) {                          //也选用innerHTML
                        one.innerHTML = newStr;                                         //匹配到的变红
                    }
                }
            });
        }
        select();  //函数解析完就运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

效果展示如下图: