Javascript之网页版待办事项

最新推荐文章于 2021-11-01 17:41:37 发布
最新推荐文章于 2021-11-01 17:41:37 发布
阅读量1.7k 收藏 17
点赞数
分类专栏： 技术分享 文章标签： javascript dom 按键事件 事件模块
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45779841/article/details/104864045
版权
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能。其中页面的HTML布局和CSS样式取用原站，JS部分为自己编写。效果图完整代码HTML、JS部分<!DOCTYPE html><html> <head> <title>ToDoList—最简单的待办事项列表</title> &...
摘要由CSDN通过智能技术生成

本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能。
其中页面的HTML布局和CSS样式取用原站，JS部分为自己编写。

效果图

待办事项效果图

完整代码

HTML、JS部分
<!DOCTYPE html>
<html>
	<head>
		<title>ToDoList—最简单的待办事项列表</title>
		<link rel="stylesheet" href="todolist.css">
	</head>
	<body>
		<header>
			<section>
				<form action="javascript: void(0)" id="form">
					<label for="title">ToDoList</label>
					<input type="text" id="title" placeholder="添加ToDo" autocomplete="off"/>
				</form>
			</section>
		</header>
		<section id="section">
			<h2>正在进行 <span id="todocount"></span></h2>
			<ol id="todolist" class="demo-box">
			</ol>
			<h2>已经完成 <span id="donecount"></span></h2>
			<ul id="donelist">
			</ul>
		</section>
		
        <script>
            var title_ele = document.getElementById("title");
            var todolist_ele = document.getElementById("todolist");
            var donelist_ele = document.getElementById("donelist");
			var section_ele = document.getElementById("section");
			
			// 功能1，添加待办事项
            addEvent(title_ele, "keydown", function(e){
   
				var keyCode = e.which || e.keyCode;
				var obj = {
   
					tag_name : "li",
					children : [
							{
   
								tag_name : "input",
								attributes : {
   
										type : "checkbox",
										class : "checkbox"
									}
							},
							{
   
								tag_name : "p",
								content : title_ele.value
							},
							{
   
								tag_name : "a",
								attributes : {
   
										href : "javascript:void(0)"
最低0.47元/天 解锁文章
浮世万千吾爱有三
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day19 待办事项功能页面完善以及显示优化
build2024
06-05 182
本章节完善了待办事项增删改查功能，及优化 打开待办事项页面时，如果无数据则显示 默认的背景图片，否则显示数据等细节优化  由于待办事项功能页，数据已正常渲染出来了。但页面新增，查询，修改，删除等功能还未实现。接下来实现待办事项的请求 Web Api 接口实现 CURD（增删改查）的功能。 一.待办事项查询搜索删除增加等功能实现 根据渲染出来的待办事项数据列表，鼠标单击对应的待办事项时，查找出该条数据，同时打开编辑窗口并展示在编辑窗口中 在搜索框中输入的参数或选择的待办事项状态，按下Enter 回车按
网页端的待办事项页面设计（javascript）
最新发布
weixin_50922984的博客
07-10 1249
页面上使用HTML和CSS设计一个待办事项，并用javascript实现简单的功能如创建新任务、删除任务、移动已完成的任务
html从右侧弹出面板,JavaScript实现网页右下角弹出窗口代码
weixin_29268331的博客
05-31 1208
JavaScript实现网页右下角弹出窗口代码 - www.webdm.cn#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}#winpop .tit...
使用html-css-js实现to-do-list待办事项小项目（详细注释）
qq_36248539的博客
06-01 1801
需求： 1.添加事项 2.点击多选框将事件移到已完成事件或未完成事件中 3.删除事项 4.计算待完成事项数目 5.计算已完成事项数目 6.展示/隐藏待办事项 7.点击 清空事项 清空全部事项 新建to-do-list文件夹，用webstorm打开 在文件夹中新建html、css以及js文档 进入文件夹，使用终端安装normalize.css 相当于样式的resets npm install --save normalize.css html布局 <!DOCTYPE html> <ht
简单的待办事项清单网站--实现基本功
qq_38831517的博客
09-14 4593
功能测试：以用户的视角测试网站。 单元测试：以程序员的视角测试网站。 所以我们的功能实现是以功能测试为基准的，而单元测试则渗透进码代码的过程中
ToDolist
王二的博客
11-01 686
官方网址http://www.todolist.cn/ 具体功能 1.添加内容 删除内容 2.本地存储 3.点击更改 css部分 *{ margin: 0; padding: 0; } .list { position: relative; } #app{ width: 100%; height: 900px; background-color: #cdcdcd; } .h1 { widt
todo-js:JavaScript 中的待办事项列表
06-10
在JavaScript编程领域，一个常见的练习项目是创建一个待办事项（Todo List）应用程序。这个"todo-js"项目正是这样一个例子，它展示了如何使用纯JavaScript来实现一个基础的待办事项管理功能。在这个项目中，我们将...
todo:Javascript待办事项列表
05-14
JavaScript待办事项列表是一种常见的网页应用，用于帮助用户管理日常任务和提高生产力。在这个项目中，我们将探讨如何使用JavaScript来创建这样一个功能丰富的待办事项应用。 首先，我们需要了解JavaScript的基础...
待办事项清单：使用JavaScript制作待办事项清单
02-15
在这个项目中，我们将探讨如何使用JavaScript来创建一个基本的待办事项清单。这个应用将允许用户添加、删除和标记已完成的任务，提高日常任务管理的效率。 首先，我们需要理解HTML、CSS和JavaScript之间的关系。...
网页端的待办事项页面设计与简单功能实现
07-10
HTML和CSS设计待办事项页面，并使用Javascript实现待办事项的新增、移动、删除的简单功能
待办事项清单Javascript-
02-16
**待办事项清单JavaScript** 在Web开发中，待办事项清单是一种常见的应用场景，它可以帮助用户组织和跟踪日常任务。在这个项目中，我们将专注于使用纯JavaScript（而非依赖任何库或框架）来实现一个基本的待办事项...
todolist:网页版代办事项列表
07-07
TodoList 一个网页的代办事项列表 Quick Start go get github.com/Bluek404/todolist 或者直接从releases下载 编辑config.yaml 运行 完成度 多用户支持 支持待办事项分类 支持隐藏已完成事项 支持添加待办事项 支持编辑待办事项 支持删除待办事项 支持多终端登录自动同步各个终端列表 支持自定义事项背景颜色 支持代办事项支持时间提醒w 支持指定日期提醒 支持间隔一定时间提醒 支持固定时间提醒（生日、闹钟等） 支持达到时间使用邮件提醒 支持达到时间使用短信提醒 支持达到时间使用QQ提醒
待办事项页面随手一写
12-28
待办事项页面，待办事项页面，内嵌人形时钟js，以及标签页切换。怕忘掉基础，随手一写，互相交流学习|||||||待办事项页面，待办事项页面，内嵌人形时钟js，以及标签页切换。怕忘掉基础，随手一写，互相交流学习
待办事项：任务列表格式的网页
02-25
去做 任务列表格式的网页。
待办事项列表todoList程序
12-21
使用jQuery及javascript，配合HTML5的本地存储localStorage，实现待办事项列表todoList的页面及程序控制逻辑，完成todolist程序的编写。
todo_sample:使用Node.js和React的简单待办事项列表
05-17
简单的待办事项清单 一个简单的待办事项清单，用于介绍Node.js和React.js。 设置： 要使此待办事项列表在您自己的环境中运行，请执行以下步骤。 将此存储库检出到您的计算机。 确保您正在运行Node v5.1.0或更高版本。 通过NVM可以轻松地管理节点版本 通过命令行导航到存储库的根目录，然后运行以下命令： npm install 通过命令行在同一目录中进行编译，并通过运行以下命令构建捆绑包： webpack 捆绑了客户端代码后，请运行以下命令来启动HTTP服务器： node app.js 最后，通过浏览器转到http://localhost:3001导航到待办事项列表。 概述： 待办事项列表有两个主要工作目录 clientclient包含与React组件，助焊剂存储或已转译和捆绑以供服务器使用的任何其他脚本有关的所有文件。 server包含与启动和处理ht
实战丨Web云开发项目—TodoList待办事项
TCB_CloudBase的博客
02-02 812
背景 TodoList应用，是面向零基础同学的快速入门应用。你可以一行代码完成TodoList的本地化搭建，如果你想要网络同步你的Todo数据，在多个设备之间实时同步共享，云开发构建仅需100行。 体验地址：https://acc.cloudbase.vip/todo/ 此项目适用于零基础用户体验使用，通过一定的模块手段集约了整体编码。如果想要深入学习请掌握js、html、css等编程技术，自主解析模块中的代码（均为入门原生代码） 如果你不想执行以下步骤翻看代码，可以直接点击下方按钮一键部署 一、
待办事项html页面,【HTML+CSS+JavaScript】实现待办事项（纯DOM实现）
weixin_33563262的博客
06-07 820
todoList#todoList {list-style: none;margin:10px 0px;padding:0;width:600px;}#todoList li {margin-bottom:5px;padding: 10px;border: 1px solid #ccc;background:#f5f5f5;position: relative;}input {padding:10...
简单的待办事项清单网站--准备工作
qq_38831517的博客
09-07 2942
博客目标 熟悉django 了解简单网站的建立和部署过程。 熟悉tdd（Test-Driven Development）流程
可以添加、删除、编辑待办事项的待办事项网页
07-09
明白了，您需要一个具备添加、删除和编辑待办事项功能的待办事项网页。以下是一个简单的示例代码，可以帮助您实现这些功能： ```html <!DOCTYPE html> <html> <head> <title>待办事项</title> </head> <body> <h1>待办事项</h1> <form id="todo-form"> <input type="text" id="todo-input"> <button type="submit">添加</button> </form> <ul id="todo-list"> </ul> <script> // 用于存储待办事项的数组 let todoList = []; // 获取表单元素和待办事项列表元素 const form = document.getElementById('todo-form'); const input = document.getElementById('todo-input'); const list = document.getElementById('todo-list'); // 提交表单时触发的函数 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单提交的默认行为 const todoText = input.value.trim(); // 获取输入框的值并去除首尾空格 if (todoText !== '') { const todoItem = { id: Date.now(), text: todoText }; todoList.push(todoItem); // 将待办事项添加到数组中 // 创建待办事项的HTML元素并添加到列表中 const li = document.createElement('li'); li.innerHTML = ` <span>${todoText}</span> <button class="delete-btn" data-id="${todoItem.id}">删除</button> <button class="edit-btn" data-id="${todoItem.id}">编辑</button> `; list.appendChild(li); input.value = ''; // 清空输入框的值 } }); // 点击删除按钮时触发的函数 list.addEventListener('click', function(event) { if (event.target.classList.contains('delete-btn')) { const itemId = parseInt(event.target.getAttribute('data-id')); todoList = todoList.filter(item => item.id !== itemId); // 从数组中删除对应的待办事项 event.target.parentElement.remove(); // 删除对应的HTML元素 } }); // 点击编辑按钮时触发的函数 list.addEventListener('click', function(event) { if (event.target.classList.contains('edit-btn')) { const itemId = parseInt(event.target.getAttribute('data-id')); const todoItem = todoList.find(item => item.id === itemId); // 找到对应的待办事项对象 const newText = prompt('请输入新的事项内容', todoItem.text); // 弹出输入框让用户编辑待办事项内容 if (newText !== null) { todoItem.text = newText; // 更新待办事项的内容 event.target.previousElementSibling.textContent = newText; // 更新对应的HTML元素内容 } } }); </script> </body> </html> ``` 这是一个基于 HTML、CSS 和 JavaScript 的简单示例。您可以将上述代码保存为一个 `.html` 文件，然后在浏览器中打开该文件，即可看到一个简单的待办事项网页。您可以根据需要进行样式和功能的自定义修改。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值