收藏
批改状态：合格
老师批语：学习一个新知识是有趣的也是痛苦的, 要坚持
1. 实例演示你对事件代理机制的理解?
答：我对事件代理机制的理解是，子元素将要发生的事件由父元素代为管理并执行操作。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件代理</title>
</head>
<body>
<label for="comment">请留言:</label>
<input type="text" id="comment" autofocus>
<ul id="list"></ul>
<script>
var comment = document.getElementById('comment');
var list = document.getElementById('list');
comment.addEventListener('keypress', addComment, false);
function addComment(event) {
if (event.key === 'Enter') {
var item = document.createElement('li');
item.innerHTML = comment.value;
if (list.childElementCount === 0) {
list.appendChild(item);
} else {
list.prepend(item,list.firstElementChild);
}
comment.value = null;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
这里直接借用了老师的代码，但我是用心去揣摩每句代码的意思的，代码用了父级的元素，即标签<ul>去创建新的<li>，当存在旧留言时，代码的父元素又把新留言<li>插入到旧<li>之前。
2. 模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能...
发挥你的想象力, 做一个看上去较为专业的界面....
答：经过复习消化老师的代码，因为知识储备不多，写了一个很简单的留言板，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0711homework</title>
<style>
#welcome{
color: red;
font-size: 30px;
text-align: center;
line-height: 80px;
}
.header{
min-height: 80px;
background-color: aliceblue;
}
.memohead{
width: 800px;
height: 80px;
margin: 0 auto;
}
.content{
width:800px;
min-height: 500px;
background-color: bisque;
margin: 10px auto;
}
.ulzone{
width: 800px;
min-height: 800px;
margin:10px auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="header">
<div class="memohead">
<p id="welcome">留 言 板</p>
</div>
</div>
<div class="content">
<label for="comment"></label>
<input type="text" id="comment" onkeypress="said(this)" style="width: 800px;height:500px" autofocus>
</div>
<div class="ulzone">
<ul id="list">
</ul>
</div>
<script>
function said(words) {
// console.log(event);
if (event.keyCode === 13) {
var item=document.createElement("li");
item.innerHTML=words.value;
item.innerHTML += ' <button onclick="del(this)">删除</button>';
// 以下用于检查留言是否是第一条，如果是，就直接记录，否则把新留言置顶
var thisul = document.querySelector('#list');
if (thisul.childElementCount===0){
thisul.append(item);
} else{
var first = thisul.firstElementChild;
thisul.prepend(item,first);
}
words.value=null;
}
// words.value=null;
}
function del(xxx) {
if (confirm('您确定删除吗？')) {
var star= xxx.parentElement;
star.remove();
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行效果图如下：
总结：真的好难，想哭！！但上课必须坚持，复习也是必须的，希望有一天能自己写个论坛。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
