JS练习之JS/CSS实现待办事项列表

JS练习之JS/CSS实现待办事项列表

实现效果如下图：

HTML代码段

<div id="myDIV" class="header">
	<h2 style="margin:5px">我的待办事项</h2>
	<input type="text" id="myInput" placeholder="Title..">
	<span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">
	<li>Hit the gym</li>
	<li class="checked">Pay bills</li>
	<li>Meet George</li>
	<li>Buy eggs</li>
	<li>repair computer</li>
	<li>Read a book</li>
</ul>

CSS代码段

<style>
body {
	 margin:0;
	 min-width:250px;
}

* {
	box-sizing:border-box;//border-box定义的盒子，不会随着padding和border的加入而增大盒子的占用空间
}

/*在列表页中移除外边距和内边距*/
ul {
	margin:0;
	padding:0;
}

/*事项的样式*/
ul li {
	cursor:pointer;		//鼠标移到事项上时鼠标显示为手指的形状
	position:relative;	
	padding:12px 8px 12px 40px;
	background: #eee;
	font-size:18px;
	transition:0.2s;
	
	/*使列表事项文字不可被选中*/
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

/*给事项添加斑马线样式(odd即偶数) */
ul li:nth-child(odd) {
	background:#f9f9f9;
}

/*鼠标移到事项上时显示较深的颜色 */
ul li:hover {
	background:#ddd;
}

/*当点击时，添加另外一种背景颜色*/
ul li.checked {
	background:#888;
	color:#fff;
	text-decoration:line-through;	//文字中间横一条线
}

/*给已完成的事项添加标记勾 */
ul li.checked::before {
	content: '';
	position:absolute;
	border-color:#fff;
	/*下面两行代码显示一个勾*/
	border-style:solid;			/*实线模式*/
	border-width:0 2px 2px 0;	/* 右、下 宽度2px，上、左宽度0。*/
	top:13px;	/*定位*/
	left:16px;
	transform:rotate(45deg);	/*顺时针旋转45度*/
	/*勾的长和宽设定*/
	height:14px;	
	width:7px;
}

/* 在事项后面添加×号关闭按钮样式 */
.close {
	position:absolute;
	right:0;
	top:0;
	padding:12px 16px 12px 16px;
}


/*头部样式*/
.header {
	background-color:#f44336;
	padding:30px 40px;

	text-align:center;
	
}

/*在头部之后清除浮动 */
.header:after {
	content:"";
	display:table;
	clear:both;
}


/*输入框样式*/
input {
	border:none;
	width:75%;
	padding:10px;
	float:left;
	font-size:16px;

}

/*添加“Add”按钮样式*/
.addBtn {
	padding:8.5px;

	width:25%;
	background:#d9d9d9;
	color:#555;
	float:left;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
}
.addBtn:hover {
	background-color:#bbb;
}
</style>

JS段代码

<script>
//在事项条后面添加×号 
var myNodelist = document.getElementsByTagName("li");	//获取所有的li元素
var i;
for(i=0;i<myNodelist.length; i++){
	var span = document.createElement("SPAN");
	var txt = document.createTextNode("\u00D7");	// \u00D7是“×”
	span.className = "close";	//给span添加 class="close"
	span.appendChild(txt);
	myNodelist[i].appendChild(span);
}

//点击×号按钮隐藏该事项
var close=document.getElementsByClassName("close");
var i;
for(i=0;i<close.length;i++){
	close[i].onclick = function(){
		var div = this.parentElement;
		div.style.display = "none";
	}
}

//当点击列表时，在列表前面出现完成标志，再次点击则取消
var list=document.querySelector('ul');
list.addEventListener('click',function(ev){
	if(ev.target.tagName == 'LI'){
		ev.target.classList.toggle('checked');
	}
},false);

//当点击Add按钮时，添加新事项
function newElement(){
	var li = document.createElement("li");
	var inputValue = document.getElementById("myInput").value;
	var t = document.createTextNode(inputValue);
	li.appendChild(t);
	if(inputValue===''){
		alert("您得输入点什么。");
	} else {
		document.getElementById("myUL").appendChild(li);
	}
	document.getElementById("myInput").value = "";	//输入完成并添加成功后清空输入框
	
	var span = document.createElement("SPAN");
	var txt = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(txt);
	li.appendChild(span);
	
	for(i = 0;i < close.length; i++){
		close[i].onclick = function(){
			var div = this.parentElement;
			div.style.display = "none";
		}
	}
}
</script>