使用JavaScript制作待办事项列表
2024-05-14 17:41:36
效果图：
项目源码如下：
<!DOCTYPE html>
<html>
<head><title>待办事项清单</title><style media="screen">*,*:before,*:after {padding: 0;margin: 0;box-sizing: border-box;}body {height: 100vh;background: #066acd;}.container {width: 40%;min-width: 450px;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;background: white;border-radius: 10px;}#newtask {position: relative;padding: 30px 20px;}#newtask input {width: 75%;height: 45px;font-family: 'Poppins', sans-serif;font-size: 15px;border: 2px solid #d1d3d4;padding: 12px;color: #111111;font-weight: 500;position: relative;border-radius: 5px;}#newtask input:focus {outline: none;border-color: #0d75ec;}#newtask button {position: relative;float: right;width: 20%;height: 45px;border-radius: 5px;font-family: 'Poppins', sans-serif;font-weight: 500;font-size: 16px;background-color: #0d75ec;border: none;color: #ffffff;cursor: pointer;outline: none;}#tasks {background-color: #ffffff;padding: 30px 20px;margin-top: 10px;border-radius: 10px;width: 100%;position: relative;}.task {background-color: #c5e1e6;height: 50px;margin-bottom: 8px;padding: 5px 10px;display: flex;border-radius: 5px;align-items: center;justify-content: space-between;border: 1px solid #939697;cursor: pointer;}.task span {font-family: 'Poppins', sans-serif;font-size: 15px;font-weight: 400;}.task button {background-color: #0a2ea4;color: #ffffff;height: 100%;width: 40px;border-radius: 5px;border: none;cursor: pointer;outline: none;}.completed {text-decoration: line-through;}</style><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head>
<body>
<div class="container"><div id="newtask"><input type="text" placeholder="要完成的任务.."><button id="push">添加</button></div><div id="tasks"></div>
</div>
<!--Script-->
<script type="text/javascript">document.querySelector('#push').onclick = function () {if (document.querySelector('#newtask input').value.length == 0) {alert("请输入任务")} else {document.querySelector('#tasks').innerHTML += `<div class="task"><span id="taskname">${document.querySelector('#newtask input').value}</span><button class="delete"><i class="far fa-trash-alt"></i></button></div>`;var current_tasks = document.querySelectorAll(".delete");for (var i = 0; i < current_tasks.length; i++) {current_tasks[i].onclick = function () {this.parentNode.remove();}}}}
</script>
</body>
</html>
使用JavaScript制作待办事项列表相关推荐
- 如何使用 JavaScript 制作待办事项列表
- html首页我的待办,JavaScript / HTML中的待办事项列表
我已经设置了这个待办事项列表,几乎所有东西都完美无缺.但是,如果我删除列表中的所有内容.它不会让我添加一个新的条目,我似乎无法弄明白为什么.只要我在列表中至少有一个条目,它就可以正常工作. 非常感谢任 ...
- 小狗钱钱_✅每次构建待办事项列表应用程序时，都会有一只小狗？ 死了？
小狗钱钱 by Hrishi Mittal 由Hrishi Mittal ✅每次构建待办事项列表应用程序时,都会有一只小狗 ? 死了? (✅ Every time you build a to-do ...
- ToDoList—最简单的待办事项列表（经典案例）重点
代码运行结果 案例说明 案例分析 案例实现代码 tdlist.html代码 <!DOCTYPE html> <html><head><meta http-eq ...
- hyperapp 共享_使用Hyperapp（1KB JS微框架）构建待办事项列表
hyperapp 共享 在本教程中,我们将使用Hyperapp构建待办事项列表应用程序. 如果您想学习函数式编程原理,但又不想陷入细节,请继续阅读. Hyperapp现在很热门. 它最近在GitHub ...
- html首页我的待办,需要帮助使HTML 5中的待办事项列表[解决]
错误是由于输入错误.我还没有删除问题,以便其他人可以使用HTML 5获得有关基本待办事项的帮助.如果必须删除此评论,我将删除该问题.需要帮助使HTML 5中的待办事项列表[解决] 你好我是一个初学者到 ...
- 适用于Android的最佳免费待办事项列表应用程序以及如何使自己成才
如果您没有组织任务,那么跟踪任务可能会很麻烦. 这就是待办事项清单的帮助. 在这篇文章中,我将向您展示一些适用于Android的最佳免费待办事项列表应用程序. 然后,我将为您提供一些有关如何创建自己的 ...
- mysql待办事项表名_SSD8-Ex4待办事项列表答案参考
[实例简介] SSD8-Ex4待办事项列表答案参考:http://wangbaiyuan.cn/mysql-database-data-released-in-java-web-service-and ...
- mysql待办事项表名_Activiti中彻底解决待办事项列表查询复杂、API不友好的设计方案...
标签: 我们使用工作流引擎,一个非常重要的功能就是获取待办事项列表,在Activiti中,我们可以通过TaskService的相关API进行查询,这些API设计优雅,但是实际使用中往往不够方便,也缺乏 ...
最新文章
- C#文件封装到Dll
- python爬虫能干什么-python爬虫能干什么
- Mac怎么刷新DNS缓存
- tensorflow 语义slam_【论文阅读28】DynaSLAM
- proe50安装方法64位_proe5.0安装方法64位
- 详解c++指针的指针和指针的引用
- js 异步执行_js执行过程你了解多少？
- Java 集成开发环境 Eclipse 安装
- 大数据分析平台搭建方式有哪些
- hive partition 分区详解一
- fpga开发教程 labview_NI LabVIEW高性能FPGA开发者指南
- 基于C语言的双人贪吃蛇游戏程序设计
- IReader Silverlight电子阅读器介绍开源项目
- 此计算机怎样连接未识别的网络连接,电脑无法连接无线网络显示未识别如何解决...
- YCOJ黑熊过河（C++）
- win10清理_卸载全家桶之后：用win10自带杀软，怎么清理电脑垃圾？
- 培养出最多亿万富翁的美国大学TOP10榜单
- txt文件读取（已解决中文乱码）
- 【案例回顾】春节一次较波折的MySQL调优
- 即将改变世界的力量：2021年最具影响力的科技预测