随机贺卡生成器

介绍

在这个项目中，你将学习如何创建一张节日贺卡，当点击“书写”按钮时，贺卡会显示随机的祝福语。这个项目将帮助你理解如何使用 JavaScript 函数、事件监听器和 DOM 操作。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置项目环境
• 如何实现一个函数，从预定义的数组中随机选择一条祝福语
• 如何实现一个函数，在贺卡中显示所选的祝福语
• 如何为“书写”按钮添加事件监听器，以触发祝福语的显示

🏆 成果

完成这个项目后，你将能够：

• 使用 JavaScript 函数生成随机内容
• 操作 DOM 以更新 HTML 元素的内容
• 添加事件监听器以触发特定操作
• 使用提供的项目结构并按照分步说明进行操作

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此操作：

打开项目文件夹。目录结构如下：

├── index.css
├── index.html
└── index.js

其中：

• index.css 是此挑战的样式文件。
• index.js 是此挑战需要完成的 JavaScript 文件。
• index.html 是贺卡页面。

点击 WebIDE 右下角的“实时运行”按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

实现 writeGreeting() 函数

在这一步中，你将实现 writeGreeting() 函数，以便从提供的 greetings 数组中随机选择一条祝福语。

1. 打开 index.js 文件。
2. 找到 writeGreeting() 函数，并用以下代码替换 // TODO 注释：

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

这段代码会在 greetings 数组中生成一个随机索引，并返回相应的祝福语。

实现 show() 函数

在这一步中，你将实现 show() 函数，以便在 greetingDisplay 元素中显示祝福语。

1. 打开 index.js 文件。
2. 找到 show() 函数，并用以下代码替换 // TODO 注释：

greetingDisplay.innerHTML = writeGreeting();

这段代码调用 writeGreeting() 函数获取一条随机祝福语，然后设置 greetingDisplay 元素的 innerHTML 来显示该祝福语。

3. 保存 index.js 文件。
4. 刷新虚拟机中的“Web 8080”视图，查看贺卡的实际效果。点击“书写”按钮，即可显示一条随机祝福语。

恭喜你！你已完成节日贺卡项目。

总结

恭喜你！你已完成这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。