原生js编写的todos

最新推荐文章于 2022-07-05 16:56:40 发布
最新推荐文章于 2022-07-05 16:56:40 发布
阅读量242 收藏 1
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55280248/article/details/119646793
版权
这个博客展示了如何使用原生JavaScript编写一个简单的todos应用程序。用户可以输入待办事项，按下回车键添加到列表中，双击条目进行编辑，点击任务前的复选框标记任务为已完成，或者通过底部的按钮切换显示全部、进行中或已完成的任务。此外，页面还包含一个计数器显示剩余任务数量，并提供样式和交互效果。
摘要由CSDN通过智能技术生成

原生js编写的todos
如果有什么问题，可以直接问我

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>todos</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			#app {
				width: 900px;
				min-height: 100%;
				background-color: rgb(237, 237, 237);
				margin: auto;
				overflow: hidden;
			}
			
			header h2{
				width: 100%;
				font-size: 100px;
				font-weight: 100;
				text-align: center;
				color: rgba(175, 47, 47, 0.15);
			}
			
			
			#new-todo {
				border: none;
				outline: none;
			}
			
			.box {
				position: relative;
				box-sizing: border-box;
				display: block;
				width: 500px;
				height: 50px;
				padding: 10px 20px;
				box-shadow: .5px .5px 3px rgb(132, 132, 132);
				font-size: 24px;
				margin: auto;
			}
			
			.box input {
				width: 15px;
				height: 15px;
				margin: 0 10px;
				box-shadow: rgba( 243,23,43,0.3);
			}
			
			.list button {
				position: absolute;
				right: 20px;
				visibility: hidden;
				border: none;
				outline: none;
				background-color: transparent;
				font-size: 24px;
				cursor: pointer;
				color: rgb(161, 161, 161);
				transition: color .5s linear;
			}
			
			.list:hover button {
				visibility: visible;
			}
			
			.list button:hover {
				color: gray;
			}
			
			.card {
				font-size: 16px;
			}
			
			.card span {
				margin-right: 30px;
			}
			
			.card input {
				display: none;
			}
			
			.card label {
				border: 1px solid transparent;
				margin: 5px;
				cursor: pointer;
				transition: border .3s linear;
			}
			
			.card label:hover {
				border: 1px solid black;
			}
			
			.card input:nth-of-type(1):checked~label:nth-of-type(1) {
				border: 1px solid black;
			}
			
			.card input:nth-of-type(2):checked~label:nth-of-type(2) {
				border: 1px solid black;
			}
			
			.card input:nth-of-type(3):checked~label:nth-of-type(3) {
				border: 1px solid black;
			}
			
			footer {
				margin: 30px;
				text-align: center;
				color: gray;
			}
			
			.check {
				text-decoration: line-through;
				color: gray;
			}
			
			.filter-ac {
				display: none;
			}
			
			.filter-comp {
				display: none;
			}
			
			.hideCard {
				visibility: hidden;
			}
			
			.showCard {
				visibility: visible;
			}
			.inof {
				margin: 65px auto 0;
				color: #bfbfbf;
				font-size: 10px;
				text-shadow: 0 1px 0 rgba(175, 47, 47, 0.15);
				text-align: center;
			}
			
			.inof p {
				line-height: 1em;
			}
			
			.inof a {
				color: inherit;
				text-decoration: none;
				font-weight: 400px;
			}
			#frame{
				position: absolute;
				border: 1px solid 1px;
				width: 400px;
				height: 5px;
				color: yellow;
				box-shadow:30 30 yellowgreen ;
			}
			#yc 
			{
				
			}
		</style>
	</head>

	<body>
		<section id="app">
			<header>
				<h2>todos</h2>
				<input type="text" id="new-todo" class="box" placeholder="What needs to be done?">
			</header>
			<section>
				<div id="todo">
					<ul></ul>
					
					<div class="box card hideCard">
						<span></span>
						<div id="frame"></div>
						<input type="radio" name="btn" id="all" checked="">
						<input type="radio" name="btn" id="active">
						<input type="radio" name="btn" id="completed">
						<label for="all">all</label>
						<label for="active">active</label>
						<label for="completed">completed</label>
						<label for="fff" id="yc" >隐藏</label>
		                <!--<label for="ffff" id="xs">显示</label>-->
					</div>
				</div>
			</section>
			<footer>
				<div>
					<footer class="inof">
				<p>Double-click to edit a todo</p>
				<p>Written by
					<a href="http://evanyou.me">Evan You</a>
				</p>
				<p>Part of
					<a href="http://todomvc.com">TodoMVC</a>
				</p>
			</footer>
				</div>
			</footer>
		</section>
		<script>
			
			(function() {
				// 添加任务到ul中
				var ul = document.querySelector('#todo ul')

				// 添加任务的输入框
				var newTodo = document.querySelector('#new-todo')

				// 底部用来显示状态的元素
				var card = document.querySelector('.card')
				
				//下边框的事件
				var oFrame = document.querySelector('#frame')

				// 用来显示任务数的元素
				var span = document.querySelector('.card span')

				// 全部的任务
				var all = document.querySelector('#all')

				// 正在进行的任务
				var active = document.querySelector('#active')

				// 完成的任务
				var completed = document.querySelector('#completed')

				var app = {
					
					todoList: [], // 保存所有任务
					count: 0, // 任务数
					init: function() {
						// 监听输入框，添加要做的任务
						newTodo.onkeyup = function(e) {
							if(e.keyCode == 13) {
								if(newTodo.value !== '') {
									this.addList(newTodo.value)
									newTodo.value = ''
									card.classList.replace('hideCard', 'showCard')
									span.innerHTML = this.count + ' items left'
									if(all.checked) {
										this.showAll()
									}
									if(active.checked) {
										this.showActive()
									}
									if(completed.checked) {
										this.showCompleted()
									}
								}
							}
						}.bind(this)
                        ul.onclick = function(){
                        	if(li>0){
                        		oFrame.style.display="block"
                        	}
                        	else{
                        		oFrame.style.display="none"
                        	}
                        }
						// 监听任务被删除、完成、未完成
						ul.onclick = function(e) {
							this.change(e)
							if(all.checked) {
								this.showAll()
							}
							if(active.checked) {
								this.showActive()
							}
							if(completed.checked) {
								this.showCompleted()
							}
						}.bind(this)

						all.onclick = function() {
							this.showAll()
						}.bind(this)

						active.onclick = function() {
							this.showActive()
						}.bind(this)

						completed.onclick = function() {
							this.showCompleted()
						}.bind(this)
					},
					change: function(e) {
						if(e.target.localName === 'button') {
							var i = this.todoList.indexOf(e.target.parentNode)
							// 若点击button要删除的任务是未完成的，则count数也要减一
							if(!e.target.parentNode.children[0].checked) {
								this.count--
									span.innerHTML = this.count + ' items left'
							}
							this.todoList.splice(i, 1)
							e.target.parentNode.parentNode.removeChild(e.target.parentNode)
							if(this.todoList.length === 0) {
								card.classList.replace('showCard', 'hideCard')
							}
						} else if(e.target.localName === 'input') {
							// 若点击的是input，则判断任务是否完成
							if(e.target.checked) {
								e.target.parentNode.classList.add('check')
								e.target.parentNode.classList.replace('active', 'completed')
								this.count--
									span.innerHTML = this.count + ' items left'
							} else {
								e.target.parentNode.classList.remove('check')
								e.target.parentNode.classList.replace('completed', 'active')
								this.count++
									span.innerHTML = this.count + ' items left'
							}
						}
					},
					
					addList: function(val) {
						var li = document.createElement('li')
						li.classList.add('box')
						li.classList.add('list')
						li.classList.add('active')
						var content = `
	        <input type="checkbox"></input>
	        ${val}
	        <button>x</button>
	      `
						li.innerHTML = content
						this.todoList.push(li)
						ul.appendChild(li)
						this.count++
					},
					/* 
	    类a代表未完成的任务
	    类b代表已完成的任务
	    类d2代表隐藏未完成的任务
	    类d1代表隐藏已完成的任务
	    
	    addList函数中，给新的任务添加了一个类a；change函数中，当被选中后把类a换成了类b
	    
	    showActive函数中，要显示未完成的任务，所以要把已完成的任务隐藏，把带有类b的任务，换成了类d1，该类为display: none
	    该函数中除了要隐藏已完成任务，也要将被隐藏的未完成任务显示出来，把类d2换成类a
	
	    showCompleted函数中，要显示已完成的任务，所以要把未完成的任务隐藏，把带有类a的任务，换成了类d2，该类为display: none
	    该函数中除了要隐藏未完成任务，也要将被隐藏的未完成任务显示出来，把类d1换成类b
	
	  */
					showAll: function() {
						for(let i = 0; i < this.todoList.length; i++) {
							this.todoList[i].classList.replace('filter-ac', 'active')
							this.todoList[i].classList.replace('filter-comp', 'completed')
						}
					},
					showActive: function() {
						for(let i = 0; i < this.todoList.length; i++) {
							this.todoList[i].classList.replace('filter-ac', 'active')
							this.todoList[i].classList.replace('completed', 'filter-comp')
						}
					},
					showCompleted: function() {
						for(let i = 0; i < this.todoList.length; i++) {
							this.todoList[i].classList.replace('filter-comp', 'completed')
							this.todoList[i].classList.replace('active', 'filter-ac')
						}
					}
				}

				app.init()
			})()
		</script>
	</body>

</html>
pink@zhu
关注
原生js实现todoList
weixin_45261642的博客
08-10 1824
效果 一、js文件 1.Utile类（封装dom元素创建方法） export default class Utils{ static ce(type,style,parent){ var elem=document.createElement(type); if(style){ for(var prop in style){ elem.style[prop]=style[prop]; }
js button onclick 传参_Vue.js备忘记录(二)
weixin_39774044的博客
11-22 838
一. 模板语法1. 文本<msg属性发生了改变，插值处的内容都会更新。如果只想更新一次: v-once<2. HTML双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用f="https://cn.vuejs.org/v2/api/#v-html">v-html指令例如：<!DOCTYPE html> 3.绑定标签属性Mustac...
JS模拟todos
weixin_45789779的博客
12-14 501
今日接触了dom函数，模拟写了一个todos. <div class="box"> <h1>Todos</h1> <input type="text" placeholder="What needs to done?"> <ul></ul> </div&gt...
使用jQuery开发Todos实录
oMicro1的博客
08-03 724
使用jQuery开发Todos实录本例是模仿vue.js中todoMVC的功能，使用jQuery进行开发，第一版的jQuery会显得有些混乱，后续将进行优化。 todoMVC具有添加、修改、删除、更改状态、分类等操作todos的功能。我的开发过程分为了以下几个步骤。 将整个应用进行功能拆分 分别实现每个子功能 合并功能 优化 具体实现 添加todos var newtodoVul= $('#
原生todoList
weixin_34257076的博客
03-01 83
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container { width: 100vw; ...
原生js实现todolist
qq_56510077的博客
10-15 757
功能需求： 1.输入内容按回车键添加事项 2.点击复选框将事项切换到另一个列表 3.点击删除按钮删除事项 4.每次刷新页面内容都不变 用到的知识： 节点操作，本地储存，数组操作 设计思路及js代码： 变量声明 doingPText = []; completePText = []; var isFirstLoad = 0;//为0表示为第一次加载 var addToDo = document.querySelector('.addToDo'); .
一个简单微信小程序TODOS应用
08-10
这个名为“wxapp-todos-master”的项目是一个基于JavaScript开发的微信小程序示例，它实现了一个基础的TODO管理应用。下面将详细介绍这个项目的相关知识点。 1. **微信小程序开发环境**：首先，你需要安装微信...
wechat-weapp-redux-todos-master_微信小程序模板js代码前台前端H5页面源码.rar
最新发布
08-09
Redux是一个JavaScript状态管理库，最初用于React应用程序，但同样可以应用于其他前端框架，包括微信小程序。Redux的核心理念是单向数据流，提供了一个中心化的store来存储整个应用的状态，以及action和reducer来...
使用 CoffeeScript 进行原生移动应用开发
虽然它不能在浏览器或Node.js中直接执行，但可以通过编译成JavaScript来实现跨平台运行。 ## 1.2 移动应用开发的需求与挑战 随着智能手机的不断普及，移动应用开发已成为互联网行业的重要技术方向之一。移动应用...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3887
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
todos:自制JavaScript待办事项清单MVC Web应用程序
05-11
待办事项 todos是使用标准Web API和模型-视图-控制器体系结构以HTML，CSS和JavaScript编写的待办事项列表SPA（单页应用程序）。 除了使用某些webfonts来显示一些漂亮的本机图标之外，没有使用外部依赖项或库。 您可以查看和使用GitHub Pages提供的Web应用程序。 特征 todos允许用户： 创建待办事项 编辑待办事项 马克·托多斯 删除待办事项 数待办事项 筛选待办事项 在浏览器会话中保持待办事项 todos利用以下著名的网络技术： 响应式网页设计（支持电话，平板电脑和台式机） ES6语言功能 事件传播 CSS Flexbox CSS定位 网络存储API MVC设计模式 关于 该项目的灵感来自计划，目的是成为一个完全交互式的Web应用程序，以跟踪待办事项。 该存储库代表TodoMVC组引入的概念的原始且独立的实现。 得到教训 我建立
to-dos-app:这是一个使用 JS 和 Webpack 动态生成的 Todos App。 它允许用户创建和删除项目和待办事项。 Todos 可以在之后进行编辑。 每个项目都显示其中包含的待办事项，并列出各个待办事项及其标题、截止日期、截止日期前的剩余时间、优先级和描述。 表单以 Bootstrap 模式显示
05-29
待办事项应用 这是一个使用 JS 和 Webpack 动态生成的 Todos App。 它允许用户创建和删除项目和待办事项。 Todos 可以在之后进行编辑。 每个项目都显示其中包含的待办事项，并列出各个待办事项及其标题、截止日期、截止日期前的剩余时间、优先级和描述。 表单以 Bootstrap 模式呈现。 未删除的项目和待办事项使用浏览器的 localStorage 持久化，当您在同一浏览器中打开应用程序时，您的所有项目和待办事项将无限期地保持可用。 内置 原生 JavaScript/ES6 网络包 日期-fns HTML 引导程序 现场版 可用 部署方式 从您选择的文件夹中打开您的终端并克隆 导航到项目目录 运行npm install 然后运行npm run start 在浏览器中打开http://localhost:8080/dist/index.html并浏览站点。
BackBone-Todos.js:主干 Todos.js
06-24
Backbone.js TodoMVC 示例 Backbone.js 通过提供具有键值绑定和自定义事件的模型、具有可枚举函数的丰富 API 的集合、具有声明性事件处理的视图以及通过 RESTful JSON 接口将所有这些连接到您现有的 API 来为 Web 应用程序提供结构。 启动应用程序 make 学习 Backbone.js 是一个很好的入门资源。 以下是您可能会觉得有用的一些链接： 来自社区的文章和指南： 从其他 Backbone.js 用户那里获得帮助： 如果您有其他有用的链接要分享，或发现上述任何链接不再有效，请。
原生js写todolist
qq_44383759的博客
06-10 264
todolist原生写法
49实现todos-js篇1
m0_49788155的博客
12-27 337
49实现todos-js篇 一、敲击回车触发的事件 entry(){ $(".text").on("keydown", e => { // 敲击回车键 if(e.keyCode == 13){ // 如果文本框里面没有内容就停止运行 if(!$(".text").val()) return // 默认总的选中框不被选中
51实现todos-完整js
m0_49788155的博客
12-27 310
51实现todos-完整js class ToDos{ constructor(){ this.init() } init(){ this.entry() } entry(){ $(".text").on("keydown", e => { if(e.keyCode == 13){ if(!$(".text").val()) return
Todos案例（一）——业务分析 & 基本布局
weixin_44867717的博客
06-12 1086
Todos案例——业务分析 & 基本布局 业务分析 todos 页面模板 下载项目压缩包后，使用时，需要先安装依赖包 todomvc-common/base.css todomvc-app-css/index.css npm install yarn intall 1、直接打开index.html 2、本地启动打开 实现基本布局 安装依赖包 修改模板的相关标签结构，从而符合JSX语法 yarn add todomvc-common todomvc-app-css 导
实现网页全屏的5种方式
__AIR__
04-01 3752
第一种 使用html body设置宽高100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
利用JS实现简单的todoList（记事本）效果
peri_zxy的博客
08-16 2959
目录 1.实现效果展示 2.HTML代码 3.CSS代码 4.Javascript代码 该记事本程序利用HTML+CSS+JavaScript前端三大框架来实现。 实现了记事本的添加，已完成和删除待办事项的基本功能。 下面是程序实现的全部代码： 1.实现效果展示 2.HTML代码 <head> <meta charset="UTF-8"> <title>TodoList</title> //导入css文件 <l
原生js ajax 示例
03-24
以下是一个原生 JavaScript AJAX 示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true); xhr.onload = function() { if (xhr.status ==...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值