💻

第1课（下）

让卡片动起来

JavaScript 交互入门

2 课时 JavaScript 入门 需要第1a课

← → 键切换 · 点击底部导航跳转

1 / 20

📖 上节课做了什么？

🃏

上节课的卡片

HTML + CSS 做的静态页面
好看，但按钮按了没反应

💻

这节课做的事

点按钮 → 金句随机切换！
还要加一点 CSS 升级

上节课 = 房子的 硬装（墙和地板）
这节课 = 通上 电（灯能亮、开关能按）
2 / 20

📄 完整代码（166行）

和上节课比，新增了：

🎨

CSS 升级

渐变色背景
transition 过渡
:active 点击效果

📝

HTML 微调

按钮加了 id="nextBtn"
金句改为占位文字

⚡

JS 新增

第112-164行
整整52行 JS！

这节课的重点就是 JavaScript 部分

3 / 20

🎨 CSS 升级① — 渐变色背景（第17行）

/* 上节课：纯色 */
background-color: #667eea;
/* 这节课：渐变色 */
background: linear-gradient(
  135deg, #667eea, #764ba2
);
💡

linear-gradient 线性渐变

135deg = 角度（从左上到右下）
#667eea = 起始颜色（蓝）
#764ba2 = 结束颜色（紫）

浏览器会自动在两种颜色之间过渡

🎨 替换练习：改 135deg → 0deg（上下渐变）
改颜色 → #f093fb → #f5576c（粉红渐变）

4 / 20

🎨 CSS 升级② — transition 过渡（第61/68/84行）

transition 让 CSS 变化时有平滑动画：

61.quote-text { transition: opacity 0.3s; }透明度变化时，0.3秒内渐变
68.quote-author { transition: opacity 0.3s; }同上，作者名的淡入淡出
84.btn { transition: transform 0.2s; }按钮位置变化时滑过去
💡

transition 语法

transition: 属性 时长

opacity 0.3s = 透明度用0.3秒渐变
transform 0.2s = 位置用0.2秒滑动

🔄

怎么触发？

JS 或 :hover 修改了 CSS 属性
→ transition 自动播放动画

opacity: 1 → opacity: 0
= 0.3秒内慢慢变透明

5 / 20

🎨 CSS 升级③ — :active + transform（第87-96行）

87-91.btn:hover { transform: translateY(-2px); }悬停时往上移2px（浮起来）
89box-shadow: 0 8px 25px ...阴影变大，更有立体感
93-96.btn:active { transform: translateY(0); }点击时回到原位（按下去）
💡

transform: translateY()

translateY(-2px) = 往上移动2像素
translateY(0) = 回到原位
配合 transition: 0.2s 就有了滑动效果

💡

:active 伪类

鼠标按下按钮时触发
和 :hover（悬停）不同
:hover = 指着但不按
:active = 正在按着

✏️ 试试：改 -2px → -5px（浮得更高），改 0.2s → 0.5s（更慢）

6 / 20

🏗️ HTML 微调（第99-110行）

和上节课比只有3处变化：

105-106id="quoteText" → "点击下方按钮..."初始文字变了，不再显示固定金句
109<button id="nextBtn">⚠️ 新增了 id！JS 要靠它找到按钮
112<script> ... </script>⚠️ 新增了 <script> 标签！JS 写在这里
⚠️

为什么按钮要用 id 而不是 class？

上节课用 class="btn" 给 CSS 用
这节课加 id="nextBtn" 给 JS 用

规律：CSS 用 class，JS 用 id
一个页面中 id 是唯一的（不能重复）
class 可以多个元素共用

7 / 20

⚡ <script> 标签 — JS 的容器（第112行）

</body>

<script>
  // 所有 JS 代码写在这里
  // 包括数组、函数、事件...
</script>

</html>
📌

<script> 放哪？

放在 </body> 之前
浏览器先加载 HTML + CSS
再加载 JS → 才能找到元素

📌

// 注释

JS 里的注释用 //
浏览器会忽略注释
只给程序员看

8 / 20

⚡ JS ① — const 变量（第118-127行）

// const = constant（常量）
// 一旦赋值就不会变
const name = "小明";
const age = 12;

const quotes = [ ... ]; // 数组
📦

const = 贴了标签的盒子

const quotes = 一个叫"quotes"的盒子
= [ ... ] = 里面装了一个数组

const 表示这个盒子不能换成别的盒子
但盒子里面的内容可以变

9 / 20

⚡ JS ② — 数组详解（第118-127行）

const quotes = [
  { text: "不积跬步，无以至千里", author: "荀子" },
  { text: "学而不思则罔，思而不学则殆", author: "孔子" },
  { text: "想象力比知识更重要", author: "爱因斯坦" },
  { text: "种一棵树最好的时间是十年前，其次是现在", author: "Dambisa Moyo" },
  { text: "唯一确定的就是不确定", author: "赫拉克利特" },
  { text: "人生没有白走的路，每一步都算数", author: "李宗盛" },
  { text: "生活就像一盒巧克力，你永远不知道下一颗是什么味道", author: "阿甘正传" },
  { text: "千里之行，始于足下", author: "老子" },
];
🗂️

数组 []

用方括号包起来，逗号分隔，里面是8条金句

📋

对象 {}

每条金句是一个对象
text: 文字 · author: 作者
用花括号包起来

🔑 取数据：quotes[0].text → "不积跬步..."
quotes[0].author → "荀子"
下标从 0 开始数！

10 / 20

⚡ JS ③ — 找到页面元素（第130-132行）

// document = 整个页面文档
// getElementById = 通过 id 找元素
const quoteText = document.getElementById('quoteText');
const quoteAuthor = document.getElementById('quoteAuthor');
const nextBtn = document.getElementById('nextBtn');
🔍

document.getElementById

document = 我们的网页
.getElementById = "帮我找到 id 是 xxx 的元素"

找到后存在变量里，后面就能操作它了

🔗

和 HTML 的对应关系

HTML 写 id="quoteText"
JS 写 getElementById('quoteText')

名字要完全一致，包括大小写！

11 / 20

⚡ JS ④ — 函数定义（第134-140行）

// function = 定义一个功能
function getRandomQuote() {
  // 先算随机下标
  const index = Math.floor(Math.random() * quotes.length);
  // 返回数组中对应下标的元素
  return quotes[index];
}
// Math.random()
// 返回 0~1 的随机小数
Math.random() = 0.473
Math.random() = 0.912

// × 数组长度（8）
0.473 × 8 = 3.78
Math.floor(3.78) = 3
💡

一步步拆解

Math.random() = 0~1的小数
× quotes.length = ×8 → 0~8的小数
Math.floor() = 向下取整 → 0~7的整数

最后 quotes[3] 或 quotes[7] ... 随机一条

12 / 20

⚡ JS ⑤ — return 返回值（第139行）

function getRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  return quotes[index];  // ← "把结果交出去"
}
📤

return 是什么？

函数算出了结果，用 return 把结果送出去
别人调用这个函数就能拿到返回值：

// 调用函数，拿到结果
const q = getRandomQuote();
// q = { text: "不积跬步...", author: "荀子" }
13 / 20

⚡ JS ⑥ — 显示随机金句（第142-159行）

function showRandomQuote() {
  const q = getRandomQuote();

  // 淡出
  quoteText.style.opacity = '0';
  quoteAuthor.style.opacity = '0';

  // 等200毫秒后
  setTimeout(function() {
    // 换内容
    quoteText.textContent = q.text;
    quoteAuthor.textContent = q.author;
    // 淡入
    quoteText.style.opacity = '1';
    quoteAuthor.style.opacity = '1';
  }, 200);
}
💡

第144行：const q

调用 getRandomQuote() 拿到一条随机金句
存在变量 q 里

💡

第147-148行：style.opacity

通过 JS 修改元素的 CSS 属性
opacity: 0 = 完全透明（看不见）
opacity: 1 = 完全不透明

💡

第151-158行：setTimeout

setTimeout(函数, 毫秒)
= "等200毫秒后再执行"
先淡出 → 换内容 → 再淡入

14 / 20

⚡ JS ⑦ — textContent（第152-153行）

// textContent = 修改元素的文字内容
quoteText.textContent = q.text;
quoteAuthor.textContent = q.author;
📝

textContent 做什么？

HTML: <div id="quoteText">点击下方按钮...</div>
↓ JS 执行后 ↓
HTML: <div id="quoteText">不积跬步...</div>

🔑

语法：元素.属性 = 值

quoteText = 找到的元素
.textContent = "你的文字内容属性"
= q.text = 改成 q 对象的 text

15 / 20

⚡ JS ⑧ — 事件绑定（第161-163行）

// addEventListener = "告诉按钮，点你的时候做什么"
nextBtn.addEventListener('click', showRandomQuote);
🖱️

addEventListener 拆解

nextBtn = 之前在132行找到的按钮
.addEventListener = "给我加个监听器"
'click' = "监听点击事件"
showRandomQuote = "点了就执行这个函数"

🔄

整个流程

1️⃣ 用户点击按钮
2️⃣ JS 收到 'click' 事件
3️⃣ 执行 showRandomQuote
4️⃣ 里面调用 getRandomQuote
5️⃣ 拿到随机金句
6️⃣ 修改页面文字
7️⃣ 用户看到新的金句 ✨

16 / 20

📊 完整 JS 执行流程

用户点击按钮
⬇️
addEventListener 触发
⬇️
showRandomQuote()
⬇️
getRandomQuote()
⬇️
Math.random() → 随机下标
⬇️
return quotes[随机]
⬆️ 返回金句
textContent = 新金句
⬇️
✨ 页面更新！
17 / 20

🛠️ 动手步骤

基于上节课的 index.html 修改：

1

改 CSS 背景（第17行）— 纯色→渐变色

2

加 transition（第61/68/84行）— 加到金句和按钮上

3

加 :active（第93行）— 按钮点击效果

4

给按钮加 id — id="nextBtn"

5

加 <script> 标签（第112行）— 开始写 JS

6

写数组 + getElementById（第118-132行）— 存数据和找元素

7

写两个函数 + 事件绑定（第134-163行）— 逻辑和交互

18 / 20

🚀 自由发挥

📝

加更多金句

在数组里加新条目，复制 { text: "...", author: "..." } 格式

🎨

换渐变色

改 linear-gradient 的颜色值

⏱️

调动画速度

改 transition 的秒数和 setTimeout 的毫秒数

🔙

加「上一句」按钮

用 history 数组记住上一次的金句

19 / 20
🎉

这节课学会了

✅ CSS 升级：渐变、transition、transform、:active

✅ <script> 标签放 JS

✅ const 变量声明

✅ 数组 [] 存多条数据

✅ 对象 {} 存一条数据的多个字段

✅ Math.random() + Math.floor() = 随机整数

✅ document.getElementById() 找到元素

✅ textContent 修改文字

✅ addEventListener 绑定点击事件

🎊 现在你的卡片会动了！点一下按钮试试 ✨

下节课预告 ☁️ 从互联网拿金句！

20 / 20