当前位置：首页 > news >正文

网页设计第6次课后作业

news 2025/10/15 7:42:48

题目：学生信息列表管理

要求：
创建一个学生信息管理页面，实现以下功能：

页面上有5个<div>元素，每个代表一个学生，内容为学生姓名
有一个按钮，点击后在每个学生姓名后面添加" - 优秀学生"
有一个按钮，点击后切换所有学生条目的背景颜色（在浅灰色和白色之间切换）
有一个按钮，点击后为每个学生添加一个序号前缀

初始HTML结构：

<!DOCTYPE html>
<html>
<head><title>学生信息管理</title><style>.student { padding: 10px; margin: 5px; border: 1px solid #ccc; }.highlight { background-color: #f0f0f0; }</style>
</head>
<body><div id="student-list"><div class="student">张三</div><div class="student">李四</div><div class="student">王五</div><div class="student">赵六</div><div class="student">钱七</div></div><button id="add-label">添加优秀标签</button><button id="toggle-bg">切换背景</button><button id="add-number">添加序号</button><script>// 在这里编写JavaScript代码</script>
</body>
</html>

图1 dom操作前界面

图2 dom操作后界面

事件操作练习题

题目：简易任务管理器

要求：
创建一个简易任务管理器，实现以下功能：

在输入框中输入任务内容，点击"添加"按钮将任务添加到列表中
每个任务项后面有一个"删除"按钮，点击可以删除该任务
点击"标记全部完成"按钮，所有任务前面显示✅符号
点击"清除完成项"按钮，删除所有带✅的任务
鼠标移动到任务项上时，背景色变浅蓝色；移出时恢复

初始HTML结构：

<!DOCTYPE html>
<html>
<head><title>简易任务管理器</title><style>.task { padding: 8px; margin: 5px; border: 1px solid #ddd; }.task:hover { background-color: #e6f7ff; }.completed::before { content: "✅ "; }.delete-btn { margin-left: 10px; color: red; cursor: pointer; }</style>
</head>
<body><h3>我的任务列表</h3><input type="text" id="task-input" placeholder="输入新任务"><button id="add-task">添加任务</button><br><br><button id="mark-all">标记全部完成</button><button id="clear-completed">清除完成项</button><div id="task-list"><!-- 任务将动态添加到这里 --></div><script>// 在这里编写JavaScript代码</script>
</body>
</html>