直接上代码：

<!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. [翻译]Python List Comprehensions: Explained Visually || Python列表解析式

    原文1地址: http://treyhunner.com/2015/12/python-list-comprehensions-now-in-color/ 原文2地址: http://blog.tea ...

  2. Android OpenGL ES 开发（二）: OpenGL ES 环境搭建

    零:环境搭建目的 为了在Android应用程序中使用OpenGL ES绘制图形,必须要为他们创建一个视图容器.其中最直接或者最常用的方式就是实现一个GLSurfaceView和一个GLSurfaceV ...

  3. Linux EXT 文件系统 详解

    上几章我们讲到了Linux启动的一些问题,接下来我们来看一下硬盘分割和EXT格式文件系统的问题.前面提到了分区表的问题,分区表位于MBR, 占用64个字节.所谓的硬盘分区也就是对硬盘进行规划,填写分区 ...

  4. 51Nod--1008

    1008 N的阶乘 mod P 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入N和P(P为质数),求N! Mod P = ? (Mod 就是求模 % ...

  5. macbookPro 搭建maven环境下载jar包

    今天要用itext的jar包,去官网看发现好像只能用maven下载,而我之前又换了电话,没办法咯,重新搭一次maven环境吧,在此记录,已便分享或自己将来查找 首选确定自己环境上jdk装好了,如果没有 ...

  6. c++对象在lua层的生命周期与内容扩展

    前言 上一篇博客记录了 tolua++ 将 c++类型,变量,函数,以及对象导出到 lua 的过程,这篇博客就接着记录一下 c++对象的内存回收以及c++对象数据和方法在lua中的扩展. 首先 tol ...

  7. NGUI_Input

    九.输入框Input 1.凡是用户可以输入文本的地方,几乎都用输入框,有登录账号和密码.输入角色名称.输入聊天内容 2.手动拼接输入框,拖动预制体的就不再说了 (1).创建一个Sprite作为输入框的 ...

  8. Python--Pycharm backup_ver1.py 控制台一直Backup FAILED

    1.windows不自带zip,需自行安装,http://gnuwin32.sourceforge.net/packages/zip.htm 2.安装后,要配置环境变量:PATH 3.简明Python ...

  9. java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@412d7230

    近期遇到了如标题这种错误,再次记录解决方法.本文參考帖子: http://bbs.csdn.net/topics/390196217 出现此bug的原因是在内存回收上.里面用Bitamp的代码为: t ...

  10. hdoj 1285 确定比赛名次 【拓扑排序】

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...