收藏
批改状态：合格
老师批语：想法不错, 加一个时间
留言板执行顺序：
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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
