直接上代码：

<!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. 从Proxy.newInstance出发

    写在前面 本篇博客是基于对动态代理,java的重写,多态特性了解的基础上对于源码的阅读,先提出几个问题 1.从静态代理变成动态代理需要解决两个问题,如何动态实现被代理类的接口并摘取接口中的方法,如果动 ...

  2. 最强离线安装MySQL_8.0.2方法

    最强离线安装MySQL_8.0.2方法,一次就能安装成功. 按照此方式,离线安装MySQL五分钟都花不到,节省了大量的宝贵时间. 前戏,假设你已经从MySQL官网中获取了下面这个压缩包: 解压之后变成 ...

  3. P1629 邮递员送信

    题目描述: 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员 ...

  4. Ubuntu TensorFlow 源码 Android Demo的编译运行

    Ubuntu TensorFlow 源码 Android Demo的编译运行 一. 安装 Android 的SDK和NDK SDK 配置 A:下载 国内下载地址选最新的: SDK: https://d ...

  5. Hexo + github 打造个人博客

    前两年开始用 wordpress 搭了一个网站,但服务器是在 Linode 上,之所以要放在 Linode 上,要从买的域名说起,因为我买的域名是 fengzheng.pub ,.pub 是不允许备案 ...

  6. PostgreSQL索引描述

    索引方式:唯一索引,主键索引,多属性索引,部分索引,表达式索引. 索引类型:B-Tree,Hash,GiST,GIN以及表达式索引 PostgreSQL所有索引都是“从属索引”,也就是说,索引在物理上 ...

  7. SQLServer复习文档1(with C#)

    目录: 前言 SQL Server基础准备 1.新建数据库 2.在数据中添加表 3.向表中添加数据 SQL Server与C#基础准备 实例解析 1.C#连接数据库 2.查询特定列数据 3.使用列别名 ...

  8. YiShop_网上商城系统多少钱

    电子商务的发展,网上商城系统的开发也变得越来越热门.商城系统开发对于企业来说是非常有必要的,一个好的网上商城系统对于企业来说是非常重要.那么到底网上商城系统多少钱呢?下面YiShop带大家去了解. 网 ...

  9. ASP.NET Core远程调试

    关于ASP.NET Core远程调试的具体做法可参考微软文档——Remote Debug ASP.NET Core on a Remote IIS Computer in Visual Studio ...

  10. 分享Sql Server 2008 r2 数据备份，同步服务器数据（一.本地备份）

    最近在部署一个系统,处于数据安全的考虑,因此对相应的数据库服务器定时备份,以及数据同步到备份服务上.之前在另外的一个项目中也做过相应的操作,但是操作都是按照查找到的文章一步一步的操作,碰到一些细节问题 ...