03-搜索框添加移除内容

最新推荐文章于 2022-11-27 23:09:33 发布

weixin_41452476

最新推荐文章于 2022-11-27 23:09:33 发布

阅读量209

点赞数

分类专栏： js小案例

本文链接：https://blog.csdn.net/weixin_41452476/article/details/109815794

版权

js小案例专栏收录该内容

4 篇文章 1 订阅

订阅专栏

html和js部分

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>

<body>
	<header>
		<div id="tou">
			<label for="">ToDoList</label>
			<input type="text" name="" id="inputBox" placeholder="请输入">
		</div>
	</header>

	<section>
		<h2>
			正在进行
			<span id="jxspan">0</span>
		</h2>
		<ul id="jinxing" class="xingjin">
			<li id="jx">
				<input type="checkbox">
				<p id="content" class="">模板</p>
				<button class="sc">删除</button>
			</li>
		</ul>
		<h2>
			已经完成
			<span id="wcspan">0</span>
		</h2>
		<ul id="wancheng" class="chengwan">
		</ul>

	</section>
</body>

<script>
	// 获取input输入框
	var _input = document.getElementById("inputBox");
	// 获取li里面的p
	var _p = document.getElementById("content");
	// 获取进行的ul
	var _jxul = document.getElementById("jinxing");
	// 获取进行的li模板
	var _mbli = document.getElementById("jx");
	// 获取进行里面的span
	var _jxspan = document.getElementById("jxspan");
	// 获取完成里面的span
	var _wcspan = document.getElementById("wcspan");
	var _wcul = document.getElementById("wancheng")
	compute();

	// 封装进行和完成的span文本内容
	function compute() {
		// 进行的span文本内容
		_jxspan.innerHTML = _jxul.children.length - 1;
		// 完成的span文本内容
		_wcspan.innerHTML = _wcul.children.length;
	}

	_input.onkeypress = function (evt) {
		var e = evt || event;
		var key = e.keyCode || e.which || e.charCode;

		// 按键添加li
		if (key == 13 && _input.value != "") {
			// 克隆一个模板
			let newItem = _mbli.cloneNode(true);
			// 获取父元素第一个儿子
			let firstY = _jxul.firstElementChild;
			// 将克隆好的插入到第一个元素之前
			_jxul.insertBefore(newItem, firstY);
			// 取消掉id
			newItem.id = "";
			// 保存input框的value值
			var _kuang = this.value;
			// 赋值
			newItem.querySelector("p").innerHTML = _kuang;
			// 将输入框清空
			this.value = "";
			compute();
		}


		// 获取删除按钮
		var _shanchu = document.querySelectorAll("#jinxing .sc");
		// 循环删除按钮集合
		for (var i = 0; i < _shanchu.length; i++) {
			// 绑定点击事件
			_shanchu[i].onclick = function () {
				// 找到父元素li移除
				this.parentElement.remove();
				compute();
			}
		}

		// 获取已经完成的ul
		var _wcul = document.getElementById("wancheng")
		// 获取进行里面的复选框
		var _fuk = document.querySelectorAll("#jinxing input");


		// 循环所有复选框
		for (var j = 0; j < _fuk.length; j++) {
			// 给复选框绑定点击事件
			_fuk[j].onclick = function () {
				// 如果选中
				if (this.checked) {
					// 把复选框的父元素li整体追加到完成框
					_wcul.appendChild(this.parentElement);
					compute();
				} else {
					// 否侧追加回原进行框里
					_jxul.appendChild(this.parentElement);
					compute();
				}
			}
		}
	}
</script>

</html>

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}

#tou {
  width: 600px;
  margin: 0 auto;
}

label {
  float: left;
  width: 100px;
  line-height: 50px;
  color: #DDD;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#tou input {
  float: right;
  width: 60%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  text-shadow: none;
  text-align: start;
  cursor: text;
  outline: none;
}

h2 {
  width: 600px;
  margin: 31px auto;
  position: relative;
}

span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #E6E6FA;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

ul {
  width: 600px;
  margin: 0 auto;
}

li {
  width: 600px;
  height: 32px;
  /* line-height: 32px; */
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  /* padding: 0 45px; */
  border-radius: 3px;
  border-left: 5px solid #629A9C;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;

}

li input {
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin-left: 10px;
}

p {
  width: 502px;
  height: 32px;
}

#wancheng li {
  border-left: 5px solid #999;
  opacity: 0.5;
}
#jx {
  display: none;
}