直接上代码：

<!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. 2943:小白鼠排队-poj

    2943:小白鼠排队 总时间限制:  1000ms 内存限制:  65536kB 描述 N只小白鼠(1 < N < 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的重量,要求按 ...

  2. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  3. ctags-vim代码间快速跳转

    ctags-vim代码间快速跳转 1.说明 在Linux环境下使用vim进行驱动程序编写和维护的时候,会经常需要调用Linux内核的函数或宏定义,在驱动程序和kernel代码之间频繁跳转是件很繁琐的事 ...

  4. iscroll遇到的两个坑

    最近移动端闪付遇到的两个坑做下总结: 1.使用iscroll后,滑动并没有生效 解决方案: 首先要查看:结构是否正确: <div id="wrapper">   //w ...

  5. 如何使用python将MySQL中的查询结果导出为Excel----xlwt的使用

    如何在MySQL中执行的一条查询语句结果导出为Excel? 一.可选方法 1.使用sql yog等远程登录,执行查询语句并导出结果集为Excel 适用于较简单的查询结果集的导出 如果需要多个SQL语句 ...

  6. 雅虎WEB前端网站优化 -- 34条军规

    雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...

  7. 天天乐宝APP开发

    "互联网+"时代是一个"信息过剩"的时代,也是一个"注意力稀缺"的时代,怎样在"无限的信息中"获取"有限的注意 ...

  8. log4j2 项目日志组件

    在项目运行过程中,常常需要进行功能调试以及用户行为的跟踪和记录,部分人习惯使用System.out,但这并不建议,它仅仅是使用方便但不便于维护也无扩展性.相比log4j的话,log4j可以控制日志信息 ...

  9. PHP curl_setopt函数用法介绍

    [导读] curl_setopt函数是php中一个重要的函数,它可以模仿用户的一些行为,如模仿用户登录,注册等等一些用户可操作的行为哦.bool curl_setopt (int ch, string ...

  10. 阿里云部署Docker（6）----解决删除&lt;none&gt;镜像问题

    转载请注明来源,本博客原创作者为:http://blog.csdn.net/minimicall?viewmode=contents 在Docker使用中,常常会碰到删除镜像不成功.反而让镜像变成了& ...