当前位置： 首页 > news >正文

day49-Todo List（待办事项列表）

news 2025/9/10 16:12:06

50 天学习 50 个项目 - HTMLCSS and JavaScript

day49-Todo List（待办事项列表）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Todo List</title><link rel="stylesheet" href="style.css" />
</head><body><h1>todos</h1><form id="form"><!-- 输入 --><!--autocomplete="off" 用于控制浏览器是否自动填充输入字段的功能。它主要用于阻止浏览器在用户输入时自动弹出先前输入过的值或历史记录。 --><!-- 由于会多次输入，所以添加autocomplete="off" 以提高用户体验 --><input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off"><!-- 显示todo list --><ul class="todos" id="todos"></ul></form><small>左键单击以切换完成。<br> 右键单击可删除待办事项</small><script src="script.js"></script>
</body></html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-color: #f5f5f5;color: #444;font-family: 'Poppins', sans-serif;/* 子元素竖直居中 */display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;
}/* 标题 */
h1 {color: aqua;font-size: 10rem;text-align: center;opacity: 0.5;
}/* 带有input的form表单 */
form {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8),4px 0px 10px rgba(255, 255, 255, 0.9);max-width: 100%;width: 400px;
}/* 输入框 */
.input {border: none;color: #444;font-size: 2rem;padding: 1rem 2rem;display: block;width: 100%;
}.input::placeholder {color: #d5d5d5;
}.input:focus {outline-color: aqua;
}/* 显示区域 */
.todos {background-color: #fff;list-style-type: none;
}/* 每一项 */
.todos li {border-top: 1px solid #e5e5e5;cursor: pointer;font-size: 1.5rem;padding: 1rem 2rem;
}/* 完成后，添加删除线 */
.todos li.completed {color: #b6b6b6;text-decoration: line-through;
}/* 提示文本 */
small {color: #b5b5b5;margin-top: 1rem;text-align: center;
}

script.js


// 重点 flex text-decoration: line-through; localStorage JSON
// 1.获取元素节点
const form = document.getElementById('form')//表单
const input = document.getElementById('input')//输入框
const todosUL = document.getElementById('todos')//todos容器
// 获取本地存储的todolist
const todos = JSON.parse(localStorage.getItem('todos'))
// 如果有，则遍历，显示
if (todos) {todos.forEach(todo => addTodo(todo))
}
// 表单提交 即输入框回车后
form.addEventListener('submit', (e) => {// 阻止表单默认行为 不希望发生页面刷新或导航行为e.preventDefault()// 添加todoaddTodo()
})
// 函数 添加todo
function addTodo(todo) {// 获取input的值let todoText = input.value// 如果todo存在值，即本地存储时有值，比如10行代码执行时if (todo) {todoText = todo.text}// 值存在，防止表单提交后，但是在表单的input并未输入值if (todoText) {// 创建liconst todoEl = document.createElement('li')// 本地存储，并且时完成的，则添加删除线if (todo && todo.completed) {todoEl.classList.add('completed')}// 文本todoEl.innerText = todoText// 单机，即左键 完成todoEl.addEventListener('click', () => {todoEl.classList.toggle('completed')// 更新本地存储updateLS()})// 右键todoEl.addEventListener('contextmenu', (e) => {// 阻止右键的默认行为，即跳出菜单e.preventDefault()// 移除dom节点todoEl.remove()// 更新本地存储updateLS()})// 添加到ul中的第一个位置todosUL.insertBefore(todoEl, todosUL.children[0])// 置空inputinput.value = ''// 更新本地存储updateLS()}
}
// 函数：更新本地存储
function updateLS() {// 获取所有的todolet todosEl = document.querySelectorAll('li')// 先设置空的const todos = []// 再遍历添加每一项todosEl.forEach(todoEl => {todos.push({text: todoEl.innerText,//文本completed: todoEl.classList.contains('completed')//是否完成})})// 本地存储localStorage.setItem('todos', JSON.stringify(todos))
}

相关文章：

day49-Todo List（待办事项列表）

50 天学习 50 个项目 - HTMLCSS and JavaScript day49-Todo List&#xff08;待办事项列表&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" co…...

编程日记 2023/8/3 9:21:58

寻找丢失数字：数学与位运算的解密之旅

本篇博客会讲解力扣“268. 丢失的数字”的解题思路&#xff0c;这是题目链接。 注意进阶中的描述&#xff1a;你能否实现线性时间复杂度、仅使用额外常数空间的算法解决此问题&#xff1f;这里我会讲解两种思路&#xff0c;它们的时间复杂度是O(N)&#xff0c;空间复杂度是O(1)…...

编程日记 2023/8/3 9:20:56

数论分块学习笔记

准备开始复习莫比乌斯反演&#xff0c;杜教筛这一部分&#xff0c;先复习一下数论分块 0.随便说说 数论分块可以计算如下形式的式子 ∑ i 1 n f ( i ) g ( ⌊ n i ⌋ ) \sum_{i1}^{n}f(i)g(\lfloor\frac{n}{i}\rfloor) ∑i1n​f(i)g(⌊in​⌋)。 利用的原理是 ⌊ n i ⌋ \lf…...

编程日记 2023/8/3 9:19:55

【基础理论】了解点过程

Maximum tsunami wave height generated by the 16 Sept. 2015 Chile earthquake, from the International Tsunami Information Center. Posted by Austin Elliott 一、说明 在这个世界上&#xff0c;会发生许多事件&#xff0c;其趋势可能遵循一种模式。在这篇博客中&#…...

编程日记 2023/8/3 9:18:53

深入理解Spring MVC中的@ResponseBody注解

引言 在现代的Web应用开发中&#xff0c;数据的传递和交互是不可或缺的一部分。Spring MVC作为一个强大的框架&#xff0c;在处理客户端请求和响应时&#xff0c;提供了许多注解来简化开发过程。其中&#xff0c;ResponseBody注解在处理方法的返回值时起到了关键作用&#xff0…...

编程日记 2023/8/3 9:17:52

大数据学习教程：Linux高级教程（下）

四、大数据集群服务器搭建 1. 新增Linux服务器 1.1、克隆虚拟机 学习环境中&#xff0c;一般使用VMware虚拟机克隆Linux系统&#xff0c;用来进行集群服务器的搭建。 VMware支持两种类型的克隆&#xff1a;完整克隆、链接克隆 完整克隆是和原始虚拟机完全独立的一个复制&…...

编程日记 2023/8/3 9:16:51

1.Oracle建表及使用

1.概述 1. 表&#xff1a;用于 存储数据 -- 是我们最常见的数据库对象 2. 表设计注意事项 (1) 表设计时&#xff0c;尽量遵从 第三范式&#xff08;3NF&#xff09; (2) 名称不能超过 30 个字符 -- 超过会报错 (3) 名称只能以 字母 大头&#xff0c;可由数字、 _、 $…...

编程日记 2023/8/3 9:15:47

《网络是怎样连接的》（二.2）

(6条消息) 《网络是怎样连接的》&#xff08;二.1&#xff09;_qq_38480311的博客-CSDN博客 本文主要取材于 《网络是怎样连接的》 第二章 2.5 2.6章节。 目录 简述&#xff1a; 本文的主要内容是 以太网的收发操作 和 UDP协议的收发操作。 IP与以太网的包收发操作 包是什…...

编程日记 2023/8/3 9:14:46

MySQL加密插件安装

加密插件 查看已经安装的插件&#xff1a;show plugs; 增加加密插件&#xff1a; 登陆MySQL后&#xff0c;通过show variables like ‘validate%’;查看相关验证规则。 ① 在配置文件中新增&#xff0c;[mysqld]标签下 plugin-load-addvalidate_password.so ② 在运行时新增…...

编程日记 2023/8/3 9:13:43

新手入门Jenkins自动化部署入门详细教程

1. 背景 在实际开发中&#xff0c;我们经常要一边开发一边测试&#xff0c;当然这里说的测试并不是程序员对自己代码的单元测试&#xff0c;而是同组程序员将代码提交后&#xff0c;由测试人员测试&#xff1b; 或者前后端分离后&#xff0c;经常会修改接口&#xff0c;然后重新…...

编程日记 2023/8/3 9:12:42

Neural Network学习笔记4

完整的模型训练套路 train.py import torch import torchvision from torch.utils.data import DataLoader # 引入自定义的网络模型 from torch.utils.tensorboard import SummaryWriterfrom model import *# 准备数据集 train_data torchvision.datasets.CIFAR10(root"…...

编程日记 2023/8/3 9:11:41

[转]关于cmake --build .的理解

https://blog.csdn.net/qq_38563206/article/details/126486183 https://blog.csdn.net/HandsomeHong/article/details/120170219 cmake --build . 该命令的含义是&#xff1a;执行当前目录下的构建系统&#xff0c;生成构建目标。 cmake项目构建过程简述: 1. 首先&#xf…...

编程日记 2023/8/3 9:10:39

【Linux下6818开发板（ARM）】硬件空间挂载

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…...

编程日记 2023/8/3 9:09:38

剑指offer 动态规划篇

题目由入门往上递增 入门 斐波那契数列_牛客题霸_牛客网 (nowcoder.com) 动态规划甚至于算法的入门题目 方法一&#xff1a;按照斐波那契的公式fnfn-1fn-2&#xff0c;从1-n求出结果。 class Solution { public:int Fibonacci(int n) {vector<int>f{0,1,1};for(int …...

编程日记 2023/8/3 9:08:35

关于Linux中前端负载均衡之VIP(LVS+Keepalived)自动化部署的一些笔记

写在前面 整理一些 LVS 相关的笔记理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐在屋檐下&#xff0c;看着天慢慢地黑下去&#xff0c;心里寂寞而凄凉&#xff0c;感到自己的生命被剥夺了。当时我是个年轻人&#xff0c;但我害怕这样生活下去&#xff0c;衰老下去。在我看来…...

编程日记 2023/8/3 9:07:34

C++ 拷贝交换技术示例

拷贝交换技术&#xff08;copy and swap&#xff09;是什么&#xff0c;网上估计能查到很多。但网上有点难找到完整的演示代码&#xff0c;所以这里记录一下。难点在于&#xff1a; 如果要满足 5 的原则&#xff0c;我到底要写那些函数&#xff1f; 默认构造函数、复制构造函数…...

编程日记 2023/8/3 9:06:27

使用 Go 语言实现二叉搜索树

原文链接&#xff1a; 使用 Go 语言实现二叉搜索树 二叉树是一种常见并且非常重要的数据结构&#xff0c;在很多项目中都能看到二叉树的身影。 它有很多变种&#xff0c;比如红黑树&#xff0c;常被用作 std::map 和 std::set 的底层实现&#xff1b;B 树和 B 树&#xff0c;…...

编程日记 2023/8/3 9:05:26

系统接口自动化测试方案

XXX接口自动化测试方案 1、引言 1.1 文档版本 版本 作者 审批 备注 V1.0 XXXX 创建测试方案文档 1.2 项目情况 项目名称 XXX 项目版本 V1.0 项目经理 XX 测试人员 XXXXX&#xff0c;XXX 所属部门 XX 备注 1.3 文档目的 本文档主要用于指导XXX-Y…...

编程日记 2023/8/3 9:04:23

小研究 - JVM 垃圾回收方式性能研究（一）

本文从几种JVM垃圾回收方式及原理出发&#xff0c;研究了在 SPEC jbb2015基准测试中不同垃圾回收方式对于JVM 性能的影响&#xff0c;并通过最终测试数据对比&#xff0c;给出了不同应用场景下如何选择垃圾回收策略的方法。 目录 1 引言 2 垃圾回收算法 2.1 标记清除法 2.2…...

编程日记 2023/8/3 9:03:21

[LeetCode]链表相关题目(c语言实现)

文章目录 LeetCode203. 移除链表元素LeetCode237. 删除链表中的节点LeetCode206. 反转链表ⅠLeetCode92. 反转链表 II思路 1思路 2 LeetCode876. 链表的中间结点剑指 Offer 22. 链表中倒数第k个节点LeetCode21. 合并两个有序链表LeetCode86. 分隔链表LeetCode234. 回文链表Leet…...

编程日记 2023/8/3 9:02:20

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/7/9 0:22:36

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/9/9 10:13:02

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/9/6 1:00:04

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/8/16 7:00:37

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/26 21:58:04

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15