直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style>

	</style>

</head>

<body>

	<h1>todolist</h1>

	<input type="text">

	<ul>

	<ul>

	<script>

		var oInput = document.getElementsByTagName("input")[0];

		oInput.onkeydown = function(event) {

			var event = event || window.event;

			if(event.keyCode == 13) {

				// 添加数据

				var data = this.value;

				addData(data);

				// 清空数据

				clearData();

			}

		}

		// 模糊查询

		oInput.oninput = function() {

			var arrLi = document.getElementsByTagName("li");

			var arr = [];

			for(var i = 0;i < arrLi.length;i++) {

				if(arrLi[i].firstChild.innerHTML.trim().indexOf(this.value.trim()) != -1) {

					arr.push(i);

				}

			}

			// show

			show(arr);

		};

		function show(arr) {

			var arrLi = document.getElementsByTagName("li");

			// 隐藏所有

			for(var i = 0;i < arrLi.length;i++) {

				arrLi[i].style.display = "none";

			}

			// 显示

			if(arr.length > 0) {

				for(var i = 0;i < arr.length;i++) {

					arrLi[arr[i]].style.display = "block";

				}

			} else {

				for(var i = 0;i < arrLi.length;i++) {

					arrLi[i].style.display = "block";

				}

			}

		}

		function addData(data)  {

			var tempLi = document.createElement("li");

			var tempBtn = document.createElement("button");

			var tempSpan = document.createElement("span");

			var oUl = document.getElementsByTagName("ul")[0];

			tempBtn.innerHTML = "delete";

			tempBtn.name = "delete";

			tempSpan.innerHTML = data;

			tempLi.appendChild(tempSpan);

			tempLi.appendChild(tempBtn);

			oUl.appendChild(tempLi);

		}

		function clearData() {

			var oInput = document.getElementsByTagName("input")[0];

			// 不能用innerHTML

			oInput.value = "";

		}

		// 点击删除

		var oUl = document.getElementsByTagName("ul")[0];

		oUl.onclick = function(event) {

			var event = event || window.event;

			var target = event.target;

			if(target.name == "delete") {

				target.parentNode.parentNode.removeChild(target.parentNode);

			}

		};

	</script>

</body>

</html>

原生JavaScript实现一个简单的todo-list的更多相关文章

  1. ASP.NET Core Blazor WebAssembly实现一个简单的TODO List

    基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...

  2. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  3. Cocoa练习01:一个简单的Todo list程序

    写一个简单的todo list程序,界面如下图: 在TextField区域输入文字,点击Add按钮会将文字显示在下面的TableView列表中.TableView列表有2列,第一列是文字的输入时间:第 ...

  4. 使用javascript完成一个简单工厂设计模式。

    在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...

  5. 使用JavaScript实现一个简单的编译器

    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...

  6. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  7. 用JavaScript实现一个简单的树结构

    数据源用数组混json结构,实现了基本的功能.效率一般,跟 dhtree 梅花雪树对比了下,都差不多. (ps感觉比dhtree快点,跟梅花雪树差不多,个人测试) 这个实现树的原理是根据json,不断 ...

  8. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  9. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

随机推荐

  1. 使用ThinkPHP的扩展功能

    文件上传类的代码位于“\ThinkPHP\Libabry\Think\Uplod.class.php”,实例化电偶用即可.1:在Home模块Index控制器test方法中实现文件上传功能.打开文件\A ...

  2. CentOS6.5 下Nginx 的安装与配置

    昨天买了个服务器最近在配置一些基础环境,想在访问www.wzpbk.com:8080  不想要后面的:8080就能直接访问到,听说了Nginx就研究下给服务器装上传说中大名鼎鼎 Nginx 他能反向代 ...

  3. SPFA【模板】单源最短路径

    题目传送 https://www.luogu.org/problem/show?pid=3371没啥解释,SPFA纯模版qaq//Gang #include<iostream> #incl ...

  4. codeforces 895B XK Segments 二分 思维

    codeforces 895B XK Segments 题目大意: 寻找符合要求的\((i,j)\)对,有:\[a_i \le a_j \] 同时存在\(k\),且\(k\)能够被\(x\)整除,\( ...

  5. 防止SSH自动断线

    在连接远程SSH服务的时候,经常会发生长时间后的断线,或者无响应(无法再键盘输入). 总体来说有两个方法: 1.依赖ssh客户端定时发送心跳. putty.SecureCRT.XShell都有这个功能 ...

  6. 删除kafka的topic及kafka基本命令

    kafka的topic默认是不允许被删除的,删除后在topic后会出现”marked for deletion”字样,实际并未删除,现在创建同样的topic会提示topic已经存在. 解决办法: se ...

  7. 【Codeforces 837D】Round Subset

    http://codeforces.com/contest/837/problem/D 分解质因数,即第i个数的因子2的个数为c2[i],因子5的个数为c5[i],末尾零的个数就是min{Σc2[i] ...

  8. How to support comparators in our sort implementations?

    上图是普林斯顿算法课part1.Mergesort章节给出的参考代码,可以发现这个代码有三处警告.造成的隐患就是我们无法在类型检查时发现送入sort()函数的数组元素类型和Comparator的泛型不 ...

  9. 我这样减少了26.5M Java内存！

    WeTest 导读 历时五天的内存优化已经结束,这里总结一下这几天都做了什么,有哪些收获.优化了,或可以优化的地方都有哪些.(因为很多事还没做,有些结论需要一定样本量才能断定,所以叫一期)一期优化减少 ...

  10. Javascript--cookie创建与查看

    创建cookie 以下代码将创建一个cookie,该cookie名称为UserName,值为Paul,过期时间为7天后(2015年6月29日) <span style="font-si ...