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

feat: add TypeScript lessons and learning panel

Browse Source 
- Introduced a new script to check TypeScript lesson files for errors.
- Created a main TypeScript file to render lessons and their details.
- Added lesson definitions with starter and answer codes.
- Implemented a user interface for navigating and running lessons.
- Styled the application with CSS for a better user experience.
- Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
charlie
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
04-dom-events-async/07-timers-and-async-order/README.md Normal file
View File

@@ -0,0 +1,25 @@
# 练习 7：setTimeout 和异步顺序
## 目标
理解同步代码和异步回调的执行先后顺序。
## 你要练什么
- `setTimeout`
- 同步顺序
- 异步回调
- DOM 日志输出
## 任务
- 点击按钮后先输出“开始执行”
- 再立刻输出“同步代码结束”
- 然后延迟输出“异步回调完成”
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/answer.js)

38
04-dom-events-async/07-timers-and-async-order/answer.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setTimeout 和异步顺序</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dce4ef;
}
#log-list li {
margin-top: 8px;
}
</style>
</head>
<body>
<section class="panel">
<h1>异步顺序练习</h1>
<button id="run-btn" type="button">开始执行</button>
<ul id="log-list"></ul>
</section>
<script src="./answer.js"></script>
</body>
</html>

20
04-dom-events-async/07-timers-and-async-order/answer.js Normal file
View File

@@ -0,0 +1,20 @@
const runButton = document.getElementById("run-btn");
const logList = document.getElementById("log-list");
function appendLog(text) {
const item = document.createElement("li");
item.textContent = text;
logList.appendChild(item);
}
runButton.addEventListener("click", function () {
logList.innerHTML = "";
appendLog("开始执行");
setTimeout(function () {
appendLog("异步回调完成");
}, 600);
appendLog("同步代码结束");
});

38
04-dom-events-async/07-timers-and-async-order/starter.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setTimeout 和异步顺序</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dce4ef;
}
#log-list li {
margin-top: 8px;
}
</style>
</head>
<body>
<section class="panel">
<h1>异步顺序练习</h1>
<button id="run-btn" type="button">开始执行</button>
<ul id="log-list"></ul>
</section>
<script src="./starter.js"></script>
</body>
</html>

6
04-dom-events-async/07-timers-and-async-order/starter.js Normal file
View File

@@ -0,0 +1,6 @@
// 任务：
// 1. 获取按钮和日志列表
// 2. 点击按钮后清空旧日志
// 3. 先追加“开始执行”
// 4. 用 setTimeout 延迟追加“异步回调完成”
// 5. 再立刻追加“同步代码结束”