Javascript实现待办事项案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>待办事项</title>
</head>
<body>
<div class="nav"><input type="text"><button>新建任务</button>
</div>
<div class="container"><div class="todo"><h3>未完成</h3><div class="row"></div></div><div class="done"><h3>已完成</h3></div>
</div>
<style>.nav{/*background-color: red;*/height: 100px;width: 800px;margin: 0 auto;display: flex;align-items: center;}.nav input{height: 50px;width: 600px;}.nav button{width: 200px;height: 50px;background-color: chocolate;color: white;border:none;}.todo{/*background-color: lawngreen;*/width:50%;height: 100%;}.done{/*background-color: palevioletred;*/width: 50%;height: 100%;}.container{/*background-color:orange;*/width: 800px;height: 800px;margin: 0 auto;display: flex;}*{margin: 0;padding: 0;box-sizing: border-box;}.container h3{height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.row{height: 50px;display: flex;align-items: center;}.row input{margin: 0 10px;}.row span{width: 300px;font-size: 30px;}.row button{width:50px;height: 40px;}
</style><script>//实现新建任务功能let addTask=document.querySelector(".nav button");//设置点击事件addTask.onclick=function (){let input=document.querySelector(".nav input");let task=input.value;if(task==""){console.log("当前任务为空不能进行新增！！")return;}let  row=document.createElement('div');row.className='row';let checkbox=document.createElement('input');checkbox.type='checkbox';let span=document.createElement('span');span.innerHTML=task;let button=document.createElement('button');button.innerHTML='删除';row.append(checkbox);row.append(span);row.append(button);let todo=document.querySelector('.todo');todo.appendChild(row);//这里的todo先根据选择器选择到所有的TODO类型//再添加row到TODO类型后面input.value="";checkbox.onclick=function (){if(checkbox.checked){let target=document.querySelector('.done');target.appendChild(row);}else {let target=document.querySelector('.todo');target.appendChild(row);}}button.onclick=function (){let parent=row.parentNode;parent.removeChild(row);}}//实现已经完成的功能</script></body>
</html>

Javascript实现待办事项案例相关推荐

使用JavaScript制作待办事项列表
效果图: 项目源码如下: <!DOCTYPE html> <html> <head><title>待办事项清单</title><st ...
toDoList最简单待办事项案例的实现
需求分析: ① 文本框里面输入内容,按下回车,就可以生成待办事项. ② 点击待办事项复选框,就可以把当前数据添加到已完成事项里面. ③ 点击已完成事项复选框,就可以把当前数据添加到待办事项里面. ④ ...
如何使用 JavaScript 制作待办事项列表
To Do List (待办事项)
To Do List (待办事项) 上篇博客中我们讲到了浏览器的本地存储,因为没有列出具体的实例让大家操作,所以肯定还有一部分人是没有彻底明白的,那么今天这篇博客,就通过一个案例来让大家好好了解一下什 ...
Javascript之网页版待办事项
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能. 其中页面的HTML布局和CSS样式取用原站,JS部分为自己编写. 效果图完整代码 HTML.JS部分 < ...
ToDoList—最简单的待办事项列表（经典案例）重点
代码运行结果案例说明案例分析案例实现代码 tdlist.html代码 <!DOCTYPE html> <html><head><meta http-eq ...
html首页我的待办,JavaScript / HTML中的待办事项列表
我已经设置了这个待办事项列表,几乎所有东西都完美无缺.但是,如果我删除列表中的所有内容.它不会让我添加一个新的条目,我似乎无法弄明白为什么.只要我在列表中至少有一个条目,它就可以正常工作. 非常感谢任 ...
待办事项-JavaScript实现
待办事项-JavaScript 实现预期效果: 步骤: 创建页面布局--> HTML 更改页面样式--> CSS 内容实现--> JavaScript HTML部分代码: < ...
【代码案例】网页版表白墙待办事项（包含完整源码）
网页版表白墙表白墙 1. 创建内容 2. 调整样式 3. 实现提交最终样式待办事项 1. 添加内容 2. 调整样式实现功能新增待办事项已完成事项删除任务最后嗨~~今天给大家分享分享两 ...

Javascript实现待办事项案例

Javascript实现待办事项案例相关推荐

最新文章

热门文章