Blogger Information
Blog 17
fans 0
comment 1
visits 15618
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板案例-2019年7月11日(作业二)
无名氏_连的博客
Original
766 people have browsed it

留言板执行顺序:

        1、获取留言文本内容->2、获取留言列表UL->3、留言板添加事件监听(用keypress键盘事件->UL内添加li元素和button元素->对li赋值->将留言内容显示并最新留言置顶)->4、添加删除事件(引用事件代理)。

学习到的新函数:

createElement() 创建元素    appendChild() 添加元素   removeChild() 删除元素   childElementCount() 获取子元素数量

insertBefor() 插入节点  confirm() 插入弹窗

以下是例子:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板案例</title>
	<style>
		textarea{margin-bottom: 40px;}
		ul{padding: 0;margin: 0;}
		ul li{list-style: none;margin: 10px;font-size: 20px;}
	</style>
</head>
<body>
	<h2>留言板:</h2>
	<textarea name="" rows="10" maxlength="" cols="70" autofocus id="textarea"></textarea>
	<ul id="ul"></ul>
	<script>
		var date = new Date();//获取时间戳
		var year=date.getFullYear(); //获取当前年份
	   	var mon=date.getMonth()+1; //获取当前月份
	   	var da=date.getDate(); //获取当前日
	   	var h=date.getHours(); //获取小时
	   	var m=date.getMinutes(); //获取分钟
	   	var s=date.getSeconds(); //获取秒
	   	var time = year+'-'+mon+'-'+da+' '+h+':'+m+':'+s;//拼接时间格式
		//获取文本域
		var textarea = document.getElementById('textarea'); 
		//获取UL列表
		var ul = document.getElementById('ul');
		//添加监听事件
		textarea.addEventListener('keypress',liuyan,false);
		function liuyan(event){
			//当按下Enter键触发事件
			
			if (event.key === 'Enter') {
				if (textarea.value == '') {
					alert('请输入内容');
				}else{
					var li = document.createElement('li');//创建li元素
				li.innerHTML = '<span style="color:#4876FF;">peter zhu :</span>  '+textarea.value+'  '+'<span style="font-size:16px;color:#ccc">'+time+'</span>'+'    <button style="color:red;">删除</button>';//对li进行赋值,并添加删除标签

				//将li以最新时间顺序添加显示在页面
				if (ul.childElementCount === 0) {
					ul.appendChild(li);
				}else{
					ul.insertBefore(li,ul.firstElementChild);
				}
				textarea.value = null;//将文本域清空
				}	
			}

			//应用事件代理原理添加删除事件
			ul.addEventListener('click',del,false);
			function del(event){
				if (confirm('是否删除')) {
					var ull = event.currentTarget;//事件添加者
					var btn = event.target;//事件的触发者
					var lii = btn.parentElement;//触发者的父元素
					console.log(btn,lii,ull);
					ull.removeChild(lii);
				}
				
			}

		}
		
	</script>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:想法不错, 加一个时间
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments