第三节 今天吃什么
一、需求分析
"今天吃什么"是一款极具趣味性的在线餐饮决策助手，旨在为面对琳琅满目美食选项而犹豫不决的用户，提供轻松愉快的随机推荐体验。该产品以简洁明快的网页界面呈现，只需轻点鼠标，即可在瞬间为用户揭晓今日餐单，让日常饮食选择变得简单又充满惊喜。
图 7-3 今天吃什么
二、所运用的知识点
1、使用document.querySelector()方法选取DOM元素，实现对页面中特定元素（如.title、.FixedMainBtn、.Item）的操作。 2、定义一个数组List，存储了大量的菜品名称，作为随机推荐的基础数据源。 3、为按钮绑定click事件监听器，通过匿名函数实现点击事件的响应处理。 4、使用Math.random()生成随机数，结合数组索引来实现从List中随机抽取菜品。 5、使用Math.ceil()、Math.random()等方法动态计算元素位置、颜色、字体大小等样式属性，增加视觉随机性。 6、使用setInterval()创建定时器，每隔一定时间（70毫秒）触发一次随机推荐操作。 7、使用classList.add()和classList.remove()方法动态添加/移除CSS类，实现动画效果。 8、使用setTimeout()设置延时操作，确保动画效果的流畅执行以及元素的适时清除。
三、操作步骤
1、构造HTML结构
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结构，然后设置语言和标题。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今天吃什么</title>
<link rel="stylesheet" href="https://www.ytwes.com/web/css/6-1.min.css">
</head>
<body>
<!-- 容器元素，用于布局 "今天吃什么" 主题相关组件 -->
<div class="song_4_04_10">
<!-- 显示主题标题 -->
<div class="title">今天吃什么？</div>
<!-- 空容器元素，放置菜品 -->
<div class="Item"></div>
<!-- 固定按钮，用户点击后启动选择过程 -->
<div class="FixedMainBtn">开始选</div>
<!-- 插入固定图片，增强视觉效果 -->
<div><img src="img/fixedimg.gif"></div>
</div>
</body>
</html>
2、获取和定义元素
// 初始化运行状态变量，初始值为0
let Run = 0;
// 获取页面《主题标题》的元素
const title = document.querySelector('.title');
// 获取页面《启动按钮》的元素
const FixedMainBtn = document.querySelector('.FixedMainBtn');
// 获取页面《放置菜品》的元素
const itemElement = document.querySelector('.Item');
// 定义一个数组，存储可供选择的食物名称
const List = ["酱烧饼", "香辣锅"];
3、添加按钮启动事件
// 为《启动按钮》元素添加点击事件监听器
FixedMainBtn.addEventListener("click", function (event) {
// 如果当前运行状态为未运行（Run === 0）
if (!Run) {
// 更新标题文本为默认提示语
title.innerHTML = "今天吃什么？";
// 更新按钮文本为停止指令
this.innerHTML = "给我停下来";
//随机菜品
// 更新运行状态为已运行（Run === 1）
Run = 1;
} else {
// 如果当前运行状态为已运行（Run === 1）
// 更新标题文本为确定提示语
title.innerHTML = "就吃这个了";
// 更新按钮文本为更换指令
this.innerHTML = "换一个";
//暂停菜品
// 更新运行状态为未运行（Run === 0）
Run = 0;
}
})
4、随机菜品
Timer = setInterval(function () {
// 随机选取食物列表中的一个食物
const randomFood = List[Math.floor(Math.random() * List.length)];
// 更新类名为"Item"的元素的文本内容为当前随机食物
itemElement.innerHTML = randomFood;
//丰富的随机特效
}, 70); // 结束定时器的匿名函数定义
5、暂停菜品
// 清除之前设置的定时器，停止食物元素的动态生成
clearInterval(Timer);
6、丰富随机特效
// 创建一个新的<div>元素，用于显示随机食物
const foodElement = document.createElement('div');
// 为新创建的元素设置类名为'random-food'
foodElement.className = 'random-food';
// 设置食物元素的文本内容为随机选取的食物名称
foodElement.textContent = randomFood;
// 随机设置食物元素的位置（top和left属性）
foodElement.style.top = Math.ceil(Math.random() * (window.innerHeight - 50)) + 'px';
foodElement.style.left = Math.ceil(Math.random() * (window.innerWidth - 50)) + 'px';
// 随机设置食物元素的文字颜色（alpha透明度渐变）
foodElement.style.color = `rgba(0, 0, 0, ${Math.random()})`;
// 随机设置食物元素的字体大小
foodElement.style.fontSize = Math.ceil(Math.random() * (22 - 12) + 12) + 'px';
// 将新创建的食物元素添加到文档<body>中
document.body.appendChild(foodElement);
// 使用setTimeout设置延时，在90毫秒后为食物元素添加类名'fade-out'以实现淡出效果
setTimeout(() => {
foodElement.classList.add('fade-out');
}, 90);
// 使用setTimeout设置延时，在500毫秒后移除食物元素
setTimeout(() => {
foodElement.remove();
}, 500);