前端笔试题：实现一个备忘录ToDoList

最新推荐文章于 2024-05-16 21:51:49 发布
最新推荐文章于 2024-05-16 21:51:49 发布
阅读量596 收藏 3
点赞数 1
分类专栏： 前端 文章标签： css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41996454/article/details/109036410
版权

题目描述

  • 实现一个备忘录，通过搜索框来增加todo事件

  • 每个todo都要有对应的删除方法

  • 搜索框要实现补全功能

  • 补全时，只显示匹配的todo项

  • 补全时，匹配的字体要显示为红色

文章目录

实现效果图

先上图。

img

开撕代码

样式随便瞎写的，凑合凑合看就好。重点是js方面的逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        ul li {
            list-style-type: none;
        }

        main {
            width: 90%;
            min-height: 800px;
            border: 2px solid black;
            margin: 0 auto;

            background: #f6f1f1;
            /*align-content: center;*/
            /*justify-content: center;*/

            display: grid;

            /*主轴居中*/
            justify-items: center;
            /*交叉轴居中*/
            align-items: center;
        }

        .container {
            width: 600px;
            background: white;
            border: 2px solid black;
            box-shadow: 5px 5px 2px black;
            text-align: center;
        }

        .search-box {
            display: inline-block;
            margin: 20px auto;
            /*border: 1px solid black;*/

        }


        input[name="search-input"] {
            font-weight: bold;
            font-size: 18px;
            border: 2px solid black;
            border-radius: 10px;
            width: 300px;
            height: 40px;

            outline: none;
        }


        button { /* 按钮美化 */
            width: 60px; /* 宽度 */
            height: 50px; /* 高度 */
            border-width: 0; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */

            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }

        button:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }


        ul li {
            text-align: left;
            font-weight: bold;
            font-size: 16px;
            padding: 10px;

            border-top: 1px solid #666;
        }

        li .del {
            float: right;
        }

        li .suggest {
            color: red;
        }
    </style>
</head>
<body>
<main>
    <div class="container">

        <div class="search-box">
            <label>
                <input id="id-input" name="search-input" type="text"/>
                <button id="id-commit">提交</button>
            </label>
        </div>
        <div class="suggest-box">
            <ul id="id-suggest">
            </ul>
        </div>
    </div>
</main>

<script>
    let eInput = document.getElementById("id-input");
    let eCommit = document.getElementById("id-commit");
    let eSuggest = document.getElementById("id-suggest");

    // 提交
    function commit() {
        let textStr = eInput.value;

        if (textStr === '') {
            return;
        }

        let tLi = document.createElement('li');
        let tSpan = document.createElement('span');
        let tA = document.createElement('a');

        tA.className = "del";
        tA.innerText = "删除"
        tA.href = "#"

        tLi.appendChild(tSpan);
        tLi.appendChild(tA);
        tSpan.innerText = textStr;

        eSuggest.appendChild(tLi);

        // 清空输入框
        eInput.value = '';

        // 绑定删除方法
        tA.onclick = function (event) {
            event.preventDefault();
            eSuggest.removeChild(this.parentNode);
        };
    }

    // 模糊查询
    function suggest() {

        let str = eInput.value;

        let suggestItems = eSuggest.getElementsByTagName("li");

        // 匹配到的文字变红色，准备工作
        let reg = new RegExp('(' + str + ')', 'g');

        for (let i = 0; i < suggestItems.length; i++) {
            let tSpan = suggestItems[i].getElementsByTagName("span")[0];

            let newStr = tSpan.innerText.replace(reg, '<span class="suggest">$1</span>')

            //也选用innerHTML
            if (tSpan.innerText.indexOf(str) === -1) {
                suggestItems[i].style.display = 'none'; //匹配不到的掩藏
            } else {
                //匹配到的变红
                tSpan.innerHTML = newStr;
            }
        }

        if (str === '') {
            for (let i = 0; i < suggestItems.length; i++) {
                suggestItems[i].style.display = 'block';//输入框空时全部显示
            }
        }

    }

    eInput.onkeyup = function (event) {
        if (event.keyCode === 13) {
            commit();
        }
        suggest();
    }
    eCommit.onclick = function () {
        commit();
        suggest();
    };

    suggest();
</script>
</body>
</html>

进阶版 防抖加持

先上效果图

img

代码仅供参考，因为这只是个临场发挥的雏形，想实现得更完美，还需细细雕琢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        ul li {
            list-style-type: none;
        }

        main {
            width: 90%;
            min-height: 800px;
            border: 2px solid black;
            margin: 0 auto;

            background: #f6f1f1;
            /*align-content: center;*/
            /*justify-content: center;*/

            display: grid;

            /*主轴居中*/
            justify-items: center;
            /*交叉轴居中*/
            align-items: center;
        }

        .container {
            width: 600px;
            background: white;
            border: 2px solid black;
            box-shadow: 5px 5px 2px black;
            text-align: center;
        }

        .search-box {
            display: inline-block;
            margin: 20px auto;
            /*border: 1px solid black;*/

        }


        input[name="search-input"] {
            font-weight: bold;
            font-size: 18px;
            border: 2px solid black;
            border-radius: 10px;
            width: 300px;
            height: 40px;

            outline: none;
        }


        button { /* 按钮美化 */
            width: 60px; /* 宽度 */
            height: 50px; /* 高度 */
            border-width: 0; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */

            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }

        button:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }


        ul li {
            text-align: left;
            font-weight: bold;
            font-size: 16px;
            padding: 10px;

            border-top: 1px solid #666;
        }

        li .del {
            float: right;
        }

        li .suggest {
            color: red;
        }
    </style>
</head>
<body>
<main>
    <div class="container">

        <div class="search-box">
            <label>
                <input id="id-input" name="search-input" type="text"/>
                <button id="id-commit">提交</button>
            </label>
        </div>
        <div class="suggest-box">
            <ul id="id-suggest">
            </ul>
        </div>
    </div>
</main>

<script>
    let eInput = document.getElementById("id-input");
    let eCommit = document.getElementById("id-commit");
    let eSuggest = document.getElementById("id-suggest");

    // 提交
    function commit() {
        let textStr = eInput.value;

        if (textStr === '') {
            return;
        }

        let tLi = document.createElement('li');
        let tSpan = document.createElement('span');
        let tA = document.createElement('a');

        tA.className = "del";
        tA.innerText = "删除"
        tA.href = "#"

        tLi.appendChild(tSpan);
        tLi.appendChild(tA);
        tSpan.innerText = textStr;

        eSuggest.appendChild(tLi);

        // 清空输入框
        eInput.value = '';

        // 绑定删除方法
        tA.onclick = function (event) {
            event.preventDefault();
            eSuggest.removeChild(this.parentNode);
        };
    }

    // 模糊查询
    function suggest() {

        let str = eInput.value;
        console.log(str)
        let suggestItems = eSuggest.getElementsByTagName("li");

        // 匹配到的文字变红色，准备工作
        let reg = new RegExp('(' + str + ')', 'g');

        for (let i = 0; i < suggestItems.length; i++) {
            let tSpan = suggestItems[i].getElementsByTagName("span")[0];

            let newStr = tSpan.innerText.replace(reg, '<span class="suggest">$1</span>')

            //也选用innerHTML
            if (tSpan.innerText.indexOf(str) === -1) {
                suggestItems[i].style.display = 'none'; //匹配不到的掩藏
            } else {
                //匹配到的变红
                tSpan.innerHTML = newStr;
            }
        }

        if (str === '') {
            for (let i = 0; i < suggestItems.length; i++) {
                suggestItems[i].style.display = 'block';//输入框空时全部显示
            }
        }

        eSuggest.style.display = "block";

    }

    // 防抖
    function debounce(func, delay = 1000, immediate = false) {
        let timer;

        let returnFunc = function () {
            let context = this;
            let args = arguments;

            // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn


            if (timer !== null) {
                clearTimeout(timer);
            }

            if (immediate === false) {
                // 不立即执行  即 先等待再执行

                // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
                // 再过 delay 毫秒就执行 fn
                timer = setTimeout(function () {
                    func.apply(context, args)
                }, delay)

            } else {
                //立即执行 先执行再等待

                // 通过该参数控制只执行一次
                let rightNow = !timer;

                // 此时立刻执行
                if (rightNow) {
                    func.apply(context, args);
                }

                // 设置定时清理
                timer = setTimeout(function () {
                    timer = null;
                }, delay);
            }
        }

        // 不想等待了 现在立即执行
        returnFunc.cancel = function () {
            console.log("不想等待了,取消等待");
            clearTimeout(timer);
            timer = null;
        }

        return returnFunc;
    }


    // 使用防抖装饰器后的suggest函数
    let debounceSuggest = debounce(suggest, 1000);

    eInput.onkeyup = function (event) {
        if (event.keyCode === 13) {
            commit();
        }
        eSuggest.style.display = "none"
        debounceSuggest();
    }

    eCommit.onclick = function () {
        commit();
        suggest();
    };

    suggest();
</script>
</body>
</html>
豆子前端
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端案例：我的备忘录（支持事件的增加、删除和修改，代码完整）
m0_67401851的博客
03-02 285
本案例未使用任何框架，均使用 js 原生以及 DOM 操作实现，代码完整，复制即用。 目录 一、案例效果 二、涉及要点 1. 事件监听 2. DOM 节点操作 （1）常用节点获取方法 （2）常用节点信息获取方法 （3）常用节点属性获取方式 （4）DOM 修改 （5）DOM 添加 （6）DOM 删除 3. DOM 控制 CSS 样式 （1）通过 style 属性控制样式 （2）通过classList控制样式： 三、完整代码+详细注释 一、案例效果 如下图，备忘录可添加新事件，对事件进行编辑，删除已有事件，
ToDoList：开发一个有趣的ToDoList
02-17
该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。... 在交互式监视模式下启动...
一个适合前端初学者的to do list
07-26
一个简单的to do list 项目，前端初学的小伙伴可自取哦，基于javascript，html，css，不难也不简单，适合初学者
前端Vue基础知识---实现简单todoListdemo
早起一杯咖啡
09-22 283
最近因工作需要，本人正在学习Vue等前端框架，特意将练习的小demo和自己对知识的理解做一些总结！
Web前端最全Vue制作todoList事件备忘录经典小案例_vue制作一个todolist(2)，整理了3家面试问题：美团+字节+腾讯
2401_84619986的博客
05-16 643
提交
实现一个TodoList---React
caicsama的博客
05-09 187
效果图： 设计步骤： 拆分组件 拆分界面 抽离组件 实现静态页面，不用实现仍的交互 实现动态页面 a. 动态显示初始化数据 ⅰ. 数据类型 ⅱ. 数据名称 ⅲ. 保存在哪一个组件 b. 交互（从绑定事件开始） 首先，将TodoList拆分成三个组件： 组件目录： 首先实现的是：静态页面，就jsx和css配合，不用涉及变量，画页面 然后，绑定事件，涉及父子组件传值、遍历的时候数据结构设计。 搜索框组件：Search Search.jsx import { nanoid } from 'nanoi
原生JavaScript实现todolist功能
11-28
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。 主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可删除和编辑 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存 可以清楚域名下本地缓存，并清空所有todolist项 具体功能的实现 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist-prime</title
TodoList:这是一个 Django TodoList 应用
07-05
【TodoList：Django 应用的实现与详解】 TodoList 是一个基于 Django 框架构建的待办事项管理应用程序。Django 是一个高级的 Python Web 开发框架，它鼓励快速开发和干净、实用的设计。这个应用最初设计为简单的 ...
用React实现一个完整的TodoList的示例代码
08-29
本篇文章主要介绍了使用 React 实现一个完整的 TodoList 的示例代码，包括组件的设计、数据结构、父子组件之间的通信等。 一、 TodoList 的功能需求 1. 可以添加任务； 2. 已完成任务和未完成任务的颜色区分开； 3...
Todomvc:使用angular做一个todolist
05-14
在IT行业中，TodoMVC是一个著名的项目，它用于展示各种前端MVC（Model-View-Controller）框架如何实现一个简单的待办事项列表。这个项目旨在为开发者提供一个平台，以便对比不同框架在实际开发中的使用体验。在这个...
Vue3.x 实现一个完整的toDoList
最新发布
06-05
在本项目中，我们主要利用Vue3.x框架来构建一个完整的toDoList应用程序，并实现类似于京东App中的搜索缓存功能。Vue3.x是Vue.js框架的最新版本，它引入了许多新特性和性能优化，使得开发过程更为高效和简洁。下面...
To-do-list:为前端开发模块做清单代码挑战
05-15
待办事项 莱尔·斯科特（Lyle Scott），2015年8月 从修改的气泡动画 调色板 背景图片
前端学习-备忘录项目实战
Flyyy‘s blog
07-10 481
期末考试快到了，需要一个复习计划表了，结合最近所学，就搞了这么一个 html+css+js 的一份小作品 添加了缓存功能：刷新/关闭计划表也不会消失啦~ 我的个人博客：https://www.kimiye.xyz 传送门：Memo Web 2019.7.7更新（界面出错按shift+F5刷新） 增加上下移动按钮（期末复习时发现无法体现ToDoList的优先级，故增加） 修复默认有一个空白项...
CSS中的选择符
Jiang216的博客
03-24 143
（1）id选择器（#myid） （2）类选择器（.myclassname） （3）标签选择器（div,h1,p） （4）后代选择器（h1 p） （5）相邻后代选择器（子）选择器（ul>li） （6）兄弟选择器（li~a） （7）相邻兄弟选择器（li+a） （8）属性选择器（a[rel="external"]） （9）伪类选择器（a:hover,li:nth-child） （...
[前端] todoList制作
qq_47500842的博客
04-27 1468
todoList制作
2024年van-swipe初始高度异常留白BUG处理(1)，面试一般问什么问题
2401_84617356的博客
05-10 936
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
To Do List (待办事项)
无糖加冰
03-26 1800
To Do List (待办事项) 上篇博客中我们讲到了浏览器的本地存储,因为没有列出具体的实例让大家操作,所以肯定还有一部分人是没有彻底明白的,那么今天这篇博客,就通过一个案例来让大家好好了解一下什么是本地存储以及本地存储的作用! 闲话少说,直接上干货! To Do List (待办事项)案例 名称: To Do List (待办事项) 需求: 前端页面的开发使用响应式布局,使得用户在移动端上也可以使用 输入事项以后,用户按回车添加到未完成目录中 未完成和已完成可以通过复选框相互转化 浏览器关闭以后
用VUE做一个简单的ToDo list （代码可直接运行）
ffffffffhh的博客
09-24 370
用VUE做一个简单的ToDo list （代码可直接运行） 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <script src="./js/vue.js"></script> --&
前端笔记-使用vue-cli（脚手架）开发TodoList
IT1995的博客
07-29 4508
目录 过程 结果 过程 命令行工具CLI，可以快速搭建大型简单应用 #全局安装 vue-cli npm install --global vue-cli #创建一个局域 webpack 模板的新项目 vue init webpack my-project #安装依赖 cd my-project npm run dev 这样就可以了， 这里我使用WebStorm...
移动应用设计：使用Fragment与适配器的ToDoList案例解析
为此，我们需要定义一个接口`NewItemAddListener`，该接口包含一个`onNewItemAdd`方法，由MainActivity实现以接收新增任务的回调。这样，Fragment与Activity之间的通信通过接口实现，遵循了组件解耦的原则。 4. 在`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值