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

JavaScript实战:制作一个待办事项列表应用


JavaScript实战:制作一个待办事项列表应用

引言

在本教程中,我们将一步步创建一个简单的待办事项列表应用,这不仅会帮助你学习基本的JavaScript编程概念,还会教会你如何处理事件以及操作DOM。这个项目是面向初学者的,旨在提供实际操作的经验。
在这里插入图片描述

知识准备

  • HTML基础:了解如何编写基础的HTML结构。
  • CSS基础:理解如何使用CSS进行样式设置。
  • JavaScript基础:熟悉变量、函数、数组和对象的概念。

第一步:创建应用的HTML结构

首先,我们需要创建一个简单的HTML页面,它将作为我们待办事项列表的骨架。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项列表应用</title><!-- 可以在这里添加CSS或链接外部样式表 -->
</head>
<body><div id="app"><h1>我的待办事项</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="添加新的待办事项..."><button type="submit">添加</button></form><ul id="todo-list"><!-- 待办事项将在这里动态插入 --></ul></div><!-- 在此处链接外部JavaScript文件 -->
</body>
</html>

第二步:添加样式

我们的应用可能会很基础,但添加一些简单的样式可以让它看起来更好。

/* 在此添加基础样式 */
body {font-family: 'Arial', sans-serif;background: #f4f4f4;color: #333;line-height: 1.6;
}#app {width: 300px;margin: 30px auto;
}#todo-form input[type="text"] {width: 70%;padding: 10px;
}#todo-form button {width: 25%;background: #333;color: white;padding: 10px;border: none;
}#todo-list {list-style: none;padding: 0;
}#todo-list li {background: #fff;margin-bottom: 5px;padding: 10px;text-align: left;
}

第三步:编写JavaScript逻辑

现在,我们将使用JavaScript为我们的应用添加交互性。

3.1 获取元素引用

// 获取DOM元素的引用
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

3.2 添加事件监听器

// 处理表单提交事件
todoForm.addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取用户输入的待办事项const newTodoText = todoInput.value.trim();// 检查输入不为空if (newTodoText !== '') {addTodoItem(newTodoText);todoInput.value = ''; // 清空输入框}
});

3.3 添加新的待办事项

function addTodoItem(text) {// 创建新的li元素const li = document.createElement('li');li.textContent = text;// 添加删除按钮const deleteBtn = document.createElement('button');deleteBtn.textContent = '删除';deleteBtn.onclick = function() {li.remove();};li.appendChild(deleteBtn);// 将新的待办事项添加到列表中todoList.appendChild(li);
}

第四步:本地存储和加载待办事项

为了保证用户在关闭浏览器后再次访问应用时能够看到之前的待办事项,我们可以使用浏览器的LocalStorage功能。

4.1 在添加新待办事项时存储数据

function addTodoItem(text) {// ...之前的代码// 存储待办事项到LocalStoragesaveTodos();
}

4.2 存储和加载函数

function saveTodos() {const todos = [];document.querySelectorAll('#todo-list li').forEach(function(item) {todos.push(item.textContent.replace('删除', '').trim());});localStorage.setItem('todos', JSON.stringify(todos));
}function loadTodos() {const todos = JSON.parse(localStorage.getItem('todos')) || [];todos.forEach(addTodoItem);
}// 页面加载时调用loadTodos
document.addEventListener('DOMContentLoaded', loadTodos);

以上是文章的大纲和部分内容,整篇文章可以根据这个基础继续扩展,深入解释每个概念,添加代码注释,增加更多的功能,如编辑待办事项、排序或筛选功能。您可以通过增加更多的例子,提示,最佳实践和相关资源,来帮助读者更好地理解并实践。不要忘了在文章的末尾添加总结部分,回顾已经学到的知识,并鼓励读者继续学习和探索JavaScript的更多功能。

相关文章:

JavaScript实战:制作一个待办事项列表应用

JavaScript实战&#xff1a;制作一个待办事项列表应用 引言 在本教程中&#xff0c;我们将一步步创建一个简单的待办事项列表应用&#xff0c;这不仅会帮助你学习基本的JavaScript编程概念&#xff0c;还会教会你如何处理事件以及操作DOM。这个项目是面向初学者的&#xff0c…...

4面百度软件测试工程师的面试经验总结

没有绝对的天才&#xff0c;只有持续不断的付出。对于我们每一个平凡人来说&#xff0c;改变命运只能依靠努力幸运&#xff0c;但如果你不够幸运&#xff0c;那就只能拉高努力的占比。 2023年7月&#xff0c;我有幸成为了百度的一名测试工程师&#xff0c;从外包辞职了历经1000…...

textarea文本框回车enter的时候自动提交表单,根据内容自动高度

切图网近期一个bootstrap5仿chatgpt页面的项目遇到的&#xff0c;textarea文本框回车enter的时候自动提交表单&#xff0c;根据内容自动高度&#xff0c;代码如下&#xff0c;亲测可用。 <textarea placeholder"Message ChatGPT…" name"" rows"&q…...

dubbo框架技术文档-《spring-boot整合dubbo框架搭建+配置文件》框架的本地基础搭建

阿丹&#xff1a; 目前流行的微服务更多的就是dubbo和springcould微服务。之前阿丹没有出过dubbo相关的文章&#xff0c;因为之前接触springcould的微服务概念比较多一点&#xff0c;但是相对于springcould来说&#xff0c;springcould服务之间的调用是大多是使用了nacos&#…...

中通快递单号查询入口,将指定某天签收的单号筛选出来

批量查询中通快递单号的物流信息&#xff0c;将指定某天签收的单号筛选出来。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;并登录 步骤2&#xff1a;点击主界面左…...

MySQL-含json字段表和与不含json字段表查询性能对比

含json字段表和与不含json字段表查询性能对比 说明: EP_USER_PICTURE_INFO_2:不含json字段表 20200729json_test:含有json字段表 其中20200729json_test 标准ID、MANAGER_NO、PHONE_NO 为非json字段 data为json字段 2个表中MANAGER_NO、PHONE_NO都创建了各自的索引 测试…...

如何用Docker快速搭建本地开发环境

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…...

SpringDataJPA基础

简介 Spring Data为数据访问层提供了熟悉且一致的Spring编程模版&#xff0c;对于每种持久性存储&#xff0c;业务代码通常需要提供不同存储库提供对不同CURD持久化操作。Spring Data为这些持久性存储以及特定实现提供了通用的接口和模版。其目的是统一简化对不同类型持久性存储…...

程序员如何成为自由的独立开发者?

你是不是那个整天坐在电脑前敲代码的程序员朋友&#xff1f;作为程序员&#xff0c;你是否也曾思考过如何成为一名独立开发者&#xff1f;思考过究竟如何踏上这段充满挑战和创造的旅程&#xff1f; 现在这个数码时代&#xff0c;技术不断演进&#xff0c;越来越多的程序员朋友…...

Ant Design Vue(v1.7.8)a-table组件的插槽功能

本案例中&#xff0c;编写了一个名为stockAdd的vue&#xff08;v2.5.17&#xff09;自定义组件&#xff0c;使用a-table组件的插槽功能&#xff0c;创建了一个可编辑的数据表格&#xff1a; 表格用于添加采购的物品&#xff0c;点“新增物品”按键&#xff0c;表格添加一行&…...

笔记69:Conv1d 和 Conv2d 之间的区别

笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\4. Transformer 网络变体 a a a a a a a a a a a...

关于马达保护器 的选型 你知道吗

一、智能马达保护器的介绍 在有色冶炼中&#xff0c;根据工艺需求和客户需求&#xff0c;智能电动机保护器的主要应用模式有保护模式、端子控制模式、全通信模式和半通信模式。 4.1保护模式 在保护模式下&#xff0c;智能电动机保护器只利用其自身的保护功能和测量功能&#…...

springboot(ssm高校竞赛管理系统 在线竞赛平台 Java系统

springboot(ssm高校竞赛管理系统 在线竞赛平台 Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…...

SDXL使用animateDiff和hotshot-xl进行文生视频

截至2023.12.8号&#xff0c;目前市面上有两款适用于SDXL的文生视频开源工具&#xff0c;分别是AnimateDiff和hotshot-xl。 一、工具下载链接 &#xff08;1&#xff09;AnimateDiff的webui版本的git链接&#xff1a; GitHub - continue-revolution/sd-webui-animatediff: A…...

【高数:3 无穷小与无穷大】

【高数&#xff1a;3 无穷小与无穷大】 1 无穷小与无穷大2 极限运算法则3 极限存在原则4 趋于无穷小的比较 参考书籍&#xff1a;毕文斌, 毛悦悦. Python漫游数学王国[M]. 北京&#xff1a;清华大学出版社&#xff0c;2022. 1 无穷小与无穷大 无穷大在sympy中用两个字母o表示无…...

C语言预读取技术 __builtin_prefetch

__builtin_prefetch 是一个编译器内置函数&#xff0c;用于在编译时向编译器发出指令&#xff0c;要求在执行期间预取内存数据。它通常用于提高程序的性能&#xff0c;特别是对于那些需要频繁访问内存的情况。 __builtin_prefetch 函数的语法如下&#xff1a;c __builtin_prefe…...

自动驾驶学习笔记(十三)——感知基础

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo Beta宣讲和线下沙龙》免费报名—>传送门 文章目录 前言 传感器 测距原理 坐标系 标定 同…...

WLAN配置实验

本文记录了WLAN配置实践的过程&#xff0c;该操作在华为HCIA中属于相对较复杂的实验&#xff0c;记录过程备忘。这里不就WLAN原理解释&#xff0c;仅进行配置实践&#xff0c;可以作为学习原理时候的参考。本文使用华为ENSP进行仿真。实验拓扑图如下&#xff1a; 1.WLAN工作流程…...

java_web接收前端传的excel文件读取数据

#本次做一个将患者数据导入到某个模块的功能&#xff0c;前期集成的代码时不时出现异常&#xff0c;本次进行修改记录 //controller层/*** 导入患者数据*/RejectReplayRequestPostMapping("/importData")public Result<?> importData(HttpServletRequest req…...

在Vue开发中v-if指令和v-show指令的使用介绍和区别及使用场景

一、条件渲染 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 <h1 v-if"awesome">Vue is awesome!</h1>v-else 你也可以使用 v-else 为 v-if 添加一个“else 区块”。 <h1 v-if"awesome"&g…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

深入解析 ReentrantLock:原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...