rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
rou
2026-03-23 14:56:04 +08:00
parent 00d3c9e4c6
commit 1071f4db05
27 changed files with 549 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
04-dom-events-async/01-query-selectors/starter.html
View File

@@ -1,52 +1,59 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取元素</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3f0;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取元素</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.cards {
display: grid;
gap: 12px;
margin-top: 18px;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3f0;
}
.card {
padding: 16px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid #dce8f8;
}
</style>
</head>
<body>
<section class="panel">
<h1 id="page-title">DOM 获取元素练习</h1>
<button class="start-btn" type="button">开始学习</button>
.cards {
display: grid;
gap: 12px;
margin-top: 18px;
}
<div class="cards">
<article class="card">获取标题</article>
<article class="card">获取按钮</article>
<article class="card">获取一组卡片</article>
</div>
</section>
.card {
padding: 16px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid #dce8f8;
}
</style>
</head>
<script src="./starter.js"></script>
</body>
</html>
<body>
<section class="panel">
<h1 id="page-title">
<p>111</p> 获取元素练习
</h1>
<button class="start-btn" type="button">开始学习</button>
<div class="cards">
<article class="card">获取标题</article>
<article class="card">获取按钮</article>
<article class="card">获取一组卡片</article>
</div>
</section>
<script src="./starter.js"></script>
</body>
</html>

8
04-dom-events-async/01-query-selectors/starter.js
View File

@@ -3,3 +3,11 @@
// 2. 用 querySelector 获取按钮
// 3. 用 querySelectorAll 获取全部卡片
// 4. 在控制台输出标题文字、按钮文字和卡片数量
const a = document.getElementById("page-title")
console.log(a.textContent);
const b = document.querySelector(".start-btn")
console.log(b.textContent);
const c = document.querySelectorAll(".card")
console.log(c.length);

6
04-dom-events-async/02-text-class-style/starter.js
View File

@@ -3,3 +3,9 @@
// 2. 修改标题文字
// 3. 给标签加上 done 类名
// 4. 修改描述文字颜色
const a = document.getElementById("title")
const b = document.getElementById("description")
const c = document.getElementById("badge")
a.textContent = "学习状态非常好"
a.classList.add("badge.done")
b.style.color = "red"

18
04-dom-events-async/03-create-and-remove/starter.js
View File

@@ -1,4 +1,22 @@
// 任务：
// 1. 获取新增按钮、删除按钮和列表
// 2. 点击新增按钮时创建一个新的 li 并追加到列表
// 3. 点击删除按钮时删除最后一个 li
const add = document.getElementById("add-btn")
const remove = document.getElementById("remove-btn")
const list = document.getElementById("task-list")
add.onclick = function () {
const a = document.createElement("li")
a.textContent = "巧克力"
list.appendChild(a)
}
remove.onclick = function () {
const c = list.lastElementChild
if (c) {
c.remove()
}
}

23
04-dom-events-async/04-click-counter/starter.js
View File

@@ -4,3 +4,26 @@ let count = 0;
// 1. 获取数字元素和 3 个按钮
// 2. 点击按钮时更新 count
// 3. 每次修改后，把最新 count 渲染到页面
const num = document.getElementById("value")
const del = document.getElementById("decrease-btn")
const add = document.getElementById("increase-btn")
const reset = document.getElementById("reset-btn")
function ren() {
num.textContent = count
}
add.addEventListener("click", function () {
count++
ren()
})
del.addEventListener("click", function () {
count--
ren()
})
reset.addEventListener("click", function () {
count = 0
ren()
})

14
04-dom-events-async/05-form-submit-and-prevent-default/starter.js
View File

@@ -4,3 +4,17 @@
// 3. 用 preventDefault() 阻止默认提交
// 4. 读取输入框内容，创建新 li，追加到列表
// 5. 清空输入框
const form = document.getElementById("todo-form")
const input = document.getElementById("todo-input")
const list = document.getElementById("todo-list")
form.addEventListener("submit", function (e) {
e.preventDefault()
const text = input.value.trim()
if (text) {
const li = document.createElement("li")
li.textContent = text
list.appendChild(li)
input.value = ""
}
})

25
04-dom-events-async/06-bubbling-and-delegation/starter.js
View File

@@ -3,3 +3,28 @@
// 2. 给 lesson-list 绑定点击事件，使用事件委托
// 3. 点击 li 时切换 active 类名
// 4. 点击删除按钮时，阻止冒泡并删除当前 li
const panel = document.getElementById("panel")
panel.addEventListener("click", function () {
console.log("点击外部")
})
const list = document.getElementById("lesson-list")
list.addEventListener("click", function (event) {
const remove = event.target.closest(".remove-btn")
if (remove) {
const li = remove.closest(".lesson-item")
if (li) {
li.remove()
event.stopPropagation()
}
return
}
const tog = event.target.closest(".lesson-item")
if (tog) {
tog.classList.add("active")
}
})

20
04-dom-events-async/07-timers-and-async-order/starter.js
View File

@@ -3,4 +3,24 @@
// 2. 点击按钮后清空旧日志
// 3. 先追加“开始执行”
// 4. 用 setTimeout 延迟追加“异步回调完成”
// 5. 再立刻追加“同步代码结束”
const btn = document.getElementById("run-btn")
const list = document.getElementById("log-list")
function add1(message) {
const li = document.createElement("li")
li.textContent = message
list.appendChild(li)
}
btn.addEventListener("click", function () {
list.textContent = ""
add1("开始执行")
setTimeout(function () {
add1("异步回调完成")
}, 2000)
add1("同步代码结束")
})

20
04-dom-events-async/08-promise-and-render/starter.js
View File

@@ -12,3 +12,23 @@ function fakeFetchCourses() {
// 3. 调用 fakeFetchCourses()
// 4. 用 then 渲染课程列表
// 5. 用 catch 处理错误
const btn = document.getElementById("load-btn")
const text = document.getElementById("status-text")
const list = document.getElementById("course-list")
btn.addEventListener("click", function () {
text.textContent = "加载中..."
fakeFetchCourses()
.then(function (result) {
text.textContent = "加载成功"
const a = result.forEach(item => {
const li = document.createElement("li")
li.textContent = item
list.appendChild(li)
});
})
.catch(function (error) {
list.textContent = "失败" + error
})
})

21
04-dom-events-async/09-async-await-panel/starter.js
View File

@@ -16,3 +16,24 @@ function fakeFetchUser() {
// 3. 用 await 等待 fakeFetchUser()
// 4. 渲染用户信息
// 5. 用 try...catch 处理异常
const btn = document.getElementById("load-user-btn")
const status = document.getElementById("user-status")
const card = document.getElementById("user-card")
async function a() {
status.textContent = "加载中"
card.innerHTML = ""
try {
const a = await fakeFetchUser()
status.textContent = "加载成功"
card.innerHTML = `
<p>姓名：${a.name}</p>
<p>角色：${a.role}</p>
<p>任务：${a.focus}</p>
`
} catch (error) {
status.textContent = "加载失败"
}
}
btn.addEventListener("click", a)

82
04-dom-events-async/10-final-dashboard/starter.js
View File

@@ -20,3 +20,85 @@ function fakeLoadExtraLessons() {
// 3. 点击列表项时切换 done 状态
// 4. 提交表单时阻止默认提交，并新增课程
// 5. 点击加载按钮时显示加载状态，并把异步返回的课程追加到列表
/* 一个课程列表区域
- 一个表单区域
- 一个添加课程的交互
- 一个点击课程切换完成状态的交互
- 一个异步加载提示或远程数据模拟
- 清晰的状态文案更新*/
const page = document.querySelector(".page")
const hero = document.querySelector("hero")
const text = document.getElementById("status-text")
const panel = document.querySelector(".panel")
const btn = document.getElementById("load-btn")
const list = document.getElementById("lesson-list")
const formPanel = document.querySelector(".form-panel")
const lessonForm = document.getElementById("lesson-form")
const lessonInput = document.getElementById("lesson-input")
function renderLessons() {
lessons.forEach(item => {
const li = document.createElement("li")
li.classList.add("li")
li.setAttribute("title", item.title)
li.setAttribute("done", item.done)
li.textContent = `
标题：${item.title}
状态：${item.done}`
list.appendChild(li)
})
}
renderLessons()
//event.target,closest,
list.addEventListener("click", function (event) {
const a = event.target.closest(".li")
if (a) {
a.textContent = `
标题：${a.title}
状态：${!a.done}`
a.done = !a.done
}
})
lessonForm.addEventListener("submit", function (event) {
event.preventDefault()
const c = document.createElement("li")
const d = lessonInput.value.trim()
c.textContent = `
标题：${d}
状态：true`
c.setAttribute("title", d)
c.setAttribute("done", true)
c.classList.add("li")
lessonInput.value = ""
list.appendChild(c)
})
async function load() {
text.textContent = "加载中"
text.innerHTML = ""
try {
const s = await fakeLoadExtraLessons()
text.textContent = "加载完成"
s.forEach(item => {
const li = document.createElement("li")
li.classList.add("li")
li.setAttribute("title", item.title)
li.setAttribute("done", item.done)
li.textContent = `
标题：${item.title}
状态：${item.done}`
list.appendChild(li)
})
} catch (error) {
text.textContent = "加载失败"
}
}
btn.addEventListener("click", load)

23
04-dom-events-async/11-input-live-preview/starter.js
View File

@@ -4,3 +4,26 @@
// 3. 把输入内容实时渲染到右侧预览
// 4. 监听阶段下拉框的 change 事件
// 5. 更新阶段标签文字
const nickname = document.getElementById("nickname-input")
const goal = document.getElementById("goal-input")
const stage = document.getElementById("stage-select")
nickname.addEventListener("input", function () {
const previewName = document.getElementById("preview-name")
previewName.textContent = nickname.value
if (!nickname.value.trim()) {
previewName.textContent = "未填写昵称"
}
})
goal.addEventListener("input", function () {
const previewGoal = document.getElementById("preview-goal")
previewGoal.textContent = goal.value
if (!goal.value.trim()) {
previewGoal.textContent = "这里会显示你的学习目标。"
}
})
stage.addEventListener("change", function () {
const previewStage = document.getElementById("preview-stage")
previewStage.textContent = stage.value
})

23
04-dom-events-async/12-prepend-remove-and-link-default/starter.js
View File

@@ -4,3 +4,26 @@
// 3. 点击 clear-active-btn 时移除所有 item 的 active 类名
// 4. 点击帮助链接时，用 preventDefault() 阻止跳转
// 5. 在提示文字里输出“已阻止默认跳转”
const prependBtn = document.getElementById("prepend-btn")
const clear = document.getElementById("clear-active-btn")
const helpLink = document.getElementById("help-link")
const hintText = document.getElementById("hint-text")
const messageList = document.getElementById("message-list")
prependBtn.addEventListener("click", function () {
const li = document.createElement("li")
li.classList.add("item")
messageList.prepend(li)
})
clear.addEventListener("click", function () {
const a = document.querySelectorAll("#message-list li")
a.forEach(item => {
item.classList.remove("active")
})
})
helpLink.addEventListener("click", function (event) {
event.preventDefault()
hintText.textContent = "已阻止默认跳转"
})