文章目录

• 实现效果
• 模块实现解析
• • html
  • css
  • javascript

    实现效果

    • 输入框输入，点击Submit按钮提交，下方显示
    • 设置事项上限6条（按照条数设置限制，默认每条事项是简约的；长文段自动换行，如果都是长文段超过显示范围就隐藏了）
    • 悬浮点击后确认删除

      模块实现解析

      html

      • 搭框架

                    喵喵大王立大功                                                              
        To-Do List
                                                                              ~ Today I need to ~                                                                Submit                                                                  
                                                                

        css

        • 页面整体布局：通过html, body的样式设置将页面内容垂直和水平居中，并且设定了统一的文字样式。

        • 整个面板样式：铺满视口、溢出隐藏、透视效果等。

        • 代办框样式：使用.container样式定义了一个相对定位的代办框，包括了宽度、高度、背景图案、圆角边框和阴影效果。

        • 分别设定标题、输入框、按钮和待办事项列表、页面底部的三个猫猫爪子的样式。（rem单位是相对于根元素字体大小的单位，因此可以根据根元素的字体大小进行缩放，适配性和灵活性更好）

          html, body {    padding: 0;    margin: 0;    /* 设置整个页面内容垂直和水平居中 */    display: flex;    justify-content: center;    align-items: center;    color: hsl(198, 1%, 29%);    font-family: FangSong;    text-align: center;    font-size: 130%;  }* {    padding: 0;    margin: 0;}/* 整个面板 */#board {    position: relative;    /* 铺满整个视口 */    width: 100vw;    height: 100vh;    background-color: #F1EEE7;    /* 溢出隐藏 */    overflow: hidden;    /* 透视效果 */    perspective: 1600px;    /* 盒模型的属性 */    /* 元素的宽度和高度包括内容、内边距和边框，而不包括外边距。 */    box-sizing: border-box;    padding: 50px;}/* #region代办框start *//* 整个代办框 */.container {    position: relative;    height: 85vh;    width: 35vw;    background: #f1f5f8;    /* 背景圆点绘制，每个重复的小方块大小为 ​25px × 25px​ */    background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);    background-size: 25px 25px;    border-radius: 20px;    box-shadow: 4px 3px 7px 2px #00000040;    box-sizing: border-box;    /* 水平居中对齐 */    margin: 0 auto;    margin-top: 5vh;}/* 标题 */.heading {    display: flex;    align-items: center;    justify-content: center;    margin-bottom: 1rem;}/* To-Do List部分样式 */.heading__title {    transform: rotate(2deg);    padding: 0.2rem 1.2rem;    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;    background-color: hsla(53, 100%, 93%, 0.708);    font-size: 1.5rem;}.heading__img {    width: 22%;}/* ~ Today I need to ~ */.form__label {    display: block;    margin-top: -1.1rem;    margin-bottom: 0.5rem;}/* 输入框 */.form__input {    box-sizing: border-box;    background-color: transparent;    padding: 0.3rem;    /* 边框设置 */    border-bottom-right-radius: 15px 3px;    border-bottom-left-radius:3px 15px;    border: solid 3px transparent;    border-bottom: dashed 3px #c6beb1;    /* 字体设置 */    font-size: 1rem;    color: hsla(260, 2%, 25%, 0.7);    width: 70%;    margin-bottom: 20px;    /* 获得焦点时 */    &:focus {        /* 去掉默认的外边框样式 */        outline: none;        /* 框变为实线，颜色为#c6beb1 */        border: solid 3px #c6beb1;    }}/* submit按钮 */.button {    padding: 0;    border: none;    /* 顺时针旋转4度 */    transform: rotate(4deg);    /* 变换的起点为中心点 */    transform-origin: center;    text-decoration: none;    padding-bottom: 3px;    border-radius: 5px;    /* 添加一个垂直的盒子阴影效果 */    box-shadow: 0 2px 0 hsl(198, 1%, 29%);    /* 过渡效果的时间和缓动函数 */    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);    /* Base64编码的背景图像 */    background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');    background-color: hsla(0, 0%, 100%, 0.7);}/* 按钮内文本样式 */.button span {    background: #f1f5f8;    display: block;    padding: 0.5rem 1rem;    border-radius: 5px;    border: 2px solid hsl(198, 1%, 29%);}/* 按钮在激活状态和获取焦点时 */.button:active, .button:focus {    transform: translateY(4px);    padding-bottom: 0px;    outline: 0;}/* 代办事项列表 */.toDoList {    padding-left: 2.5rem;    text-align: left;}li {    position: relative;    padding-top: 0.4rem;    font-size: 24px;    color: #3c4654;    /* 实现自动换行 */    word-break: break-all;}/* 悬停时添加删除线效果 */li:hover {    text-decoration: line-through #d5c8a0;}/* 右下角的三个爪子 */.cute1{    position: absolute;     bottom: 1%;     right: 14%;     width: 20%;    height: 20%;}.cute2{    position: absolute;     bottom: 14%;     right: 1%;     width: 20%;    height: 20%;}.cute3{    position: absolute;     bottom: 0;     right: 0;     width: 20%;    height: 20%;}/* #endregion代办框end */

          javascript

          • 获取页面中的元素：锁定了包含表单的元素(form)、表单输入框(input)和代办事项列表(ul)。
          • 添加事件监听器：
            • 当表单(form)提交时，阻止默认的提交行为，并且获取输入框中的待办事项内容。如果待办事项列表中已经有6个或以上的项，则会弹出一个警告框。然后将新的待办事项以li的形式添加到代办事项列表中，并清空输入框内容。
            • 当代办事项列表中的项被点击时，会弹出确认对话框，确认是否删除该待办事项。如果确认删除，则从页面中删除对应的待办事项。

              (() => {     // 锁定元素    const form = document.querySelector(".form");     const input = form.querySelector(".form__input");     const ul = document.querySelector(".toDoList");     // 代办提交时    form.addEventListener('submit', e => {        // 阻止表单的默认提交行为        e.preventDefault();         // 生成唯一的id        let itemId = String(Date.now());         // 获取输入框中的待办事项内容        let toDoItem = input.value;         // 如果待办事项列表已经有6个或以上的项        if (ul.children.length >= 6) {             alert("喵喵大王处理不过来啦！");             return;        }        // 将待办事项添加到页面中        const li = document.createElement('li');         li.setAttribute("data-id", itemId);         li.innerText = toDoItem;         ul.appendChild(li);                // 清空输入框        input.value = '';     });    // 点击删除时    ul.addEventListener('click', e => {        // 获取被点击项的id        let id = e.target.getAttribute('data-id')         // 如果被点击的不是待办事项，则退出函数        if (!id) return         // 弹出确认对话框，确认是否删除该待办事项        if (confirm("好耶，喵喵大王又做完一件事♪(^∇^*)")) {             // 从页面中删除该待办事项            var li = document.querySelector('[data-]');             ul.removeChild(li);         }    });})();

            • 锁定元素：使用document.querySelector方法选择具有指定类名的元素，存储在变量中。
            • 阻止表单的默认提交行为：e.preventDefault();
            • 为li元素设置属性：li.setAttribute("data-id", itemId);
            • 将li元素添加到ul元素中：ul.appendChild(li);
            • let itemId = String(Date.now())用了JavaScript内置的Date对象来获取当前时间的毫秒数，然后使用String()函数将其转换为字符串赋值给itemId变量。以此生成一个“基本”唯一的ID来标识页面中的代办条例，以便在后续的操作中对其进行识别和处理。
            • 获取被点击项的id：let id = e.target.getAttribute('data-id')
            • 从页面中删除该待办事项：ul.removeChild(li);