直接上代码：

<!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. java.util.HashMap和java.util.HashTable (JDK1.8)

    一.java.util.HashMap 1.1 java.util.HashMap 综述 java.util.HashMap继承结构如下图 HashMap是非线程安全的,key和value都支持nul ...

  2. 机器学习算法 - 支持向量机SVM

    在上两节中,我们讲解了机器学习的决策树和k-近邻算法,本节我们讲解另外一种分类算法:支持向量机SVM. SVM是迄今为止最好使用的分类器之一,它可以不加修改即可直接使用,从而得到低错误率的结果. [案 ...

  3. PHP面向对象之const常量修饰符

    在PHP中定义常量是通过define()函数来完成的,但在类中定义常量不能使用define(),而需要使用const修饰符.类中的常量使用const定义后,其访问方式和静态成员类似,都是通过类名或在成 ...

  4. 《Linux命令行与shell脚本编程大全》第二十六章 一些有意思的脚本

    26.1 发送消息 26.1.1 功能分析 1.确定系统中都有谁 $who 给出的信息包括用户名 用户所在终端 用户登入系统的时间 2.启用消息功能 用户可以禁止别人给我发消息,所以需要先检查一下是否 ...

  5. redis秒杀

    用Redis轻松实现秒杀系统 秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: 写入内存而不是写入硬盘 异步处理而不是同步处理 分布式处理 用上这三招, ...

  6. VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。

    VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态 解决办法: 下载LeoM ...

  7. linux上安装php7 memcache扩展 和 安装服务端memcached

    linux上安装memcached不算太困难.唯一让本人感到困难的是 php7的memcache扩展安装.真的蛋疼! 先说安装服务端 memcached 1. 首先安装Libevent事件触发管理器. ...

  8. 预防onion比特币勒索病毒，如何快速关闭135,137,138,139,445端口

    预防onion比特币勒索病毒,如何快速关闭135,137,138,139,445等端口   如果这种网络端口关闭方法行不通,可以尝试一种新的关闭网络端口方法(比较繁琐)见106楼,补丁安装教程见126 ...

  9. Scala中的override

    Scala中的override override是覆盖的意思,在很多语言中都有,在scala中,override是非常常见的,在类继承方面,它和java不一样,不是可写可不写的了,而是必须写的.如果不 ...

  10. Webpack3.0入门指南

    前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于window ...