推荐点击下面图片，通过本站淘宝优惠价购买:
一款极具趣味性的在线餐饮决策助手，旨在为面对琳琅满目美食选项而犹豫不决的用户，提供轻松愉快的随机推荐体验。该产品以简洁明快的网页界面呈现，只需轻点鼠标，即可在瞬间为用户揭晓今日餐单，让日常饮食选择变得简单又充满惊喜。
所运用的知识点
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);html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今天吃什么</title>
<link rel="stylesheet" href="https://www.kinber.cn/eat.css">
</head>
<body>
<div>
<div>今天吃什么？</div>
<div></div>
<div>开始选</div>
<div><img src="https://www.ytwes.com/zb_users/upload/2024/04/202404101712756269256194.gif"></div>
</div>
<script>
let Run = 0;
const title = document.querySelector('.title');
const FixedMainBtn = document.querySelector('.FixedMainBtn');
const itemElement = document.querySelector('.Item');
const List = [
"酱烧饼",
"香辣锅",
"干锅牛蛙",
"麻婆豆腐",
"口水鸡",
"凉拌猪肚",
"钵钵鸡",
"麻辣烫",
"酸辣粉",
"毛血旺",
"盐水鸭",
"盐焗鸡",
"砂锅虾蟹粥",
"炒花甲",
"糖醋排骨",
"酸汤肥牛",
"酱猪蹄",
"烤乳猪",
"虾饺",
"烧卖",
"糯米鸡",
"粉果",
"马蹄糕",
"又烧包",
"蟹黄包",
"奶油鸡蛋卷",
"肠粉",
"干炒牛河",
"湿炒牛河",
"艇仔粥",
"及第粥",
"猪红汤",
"伦教糕",
"萝卜糕",
"咸水角",
"凤爪",
"卤牛杂",
"薄脆",
"潮州牛肉丸",
"普宁豆干",
"金针肥牛卷",
"菠萝咕噜肉",
"蒜蓉金针菇",
"腊味煲仔饭",
"叉烧",
"滑蛋牛肉",
"客家甜酒鸡",
"客家酿豆腐",
"猪脚姜",
"烧鹅",
"虎皮尖椒",
"糖醋里脊",
"蒜蓉粉丝蒸扇贝",
"凉瓜牛肉",
"香煎芙蓉蛋",
"蒜蓉开边虾",
"三杯鸡",
"三杯鸭",
"醉鸡",
"酱猪蹄",
"宫保鸡丁",
"夫妻肺片",
"鱼香肉丝",
"粉蒸牛肉",
"粉蒸排骨",
"猪肚鸡",
"回锅肉",
"东坡肘子",
"火锅",
"烫毛肚",
"烫腰片",
"烫猪脑",
"烫滑牛肉",
"烫豆花",
"烫鸭肠",
"烫黄喉",
"烫鱼片",
"烫肥牛",
"烫猪蹄",
"烫鸭血",
"烫酥肉",
"烫午餐头",
"烫泥鳅",
"烫牛蛙",
"烫牛丸",
"烫虾滑",
"烫鱼滑",
"烫豆腐",
"烫油豆腐",
"烫苕粉",
"烫豆皮",
"烫腐竹",
"烫魔芋丝",
"烫竹笋",
"烫竹荪",
"西红柿炒蛋",
"灯影牛肉",
"青椒鱼",
"担担面",
"红油耳丝",
"串串香",
"川北凉粉",
"凉面",
"豌豆小面",
"兰州牛肉拉面",
"老妈蹄花",
"冒菜",
"红烧排骨",
"冷吃兔",
"蒜泥白肉",
"老坛子",
"樟茶鸭",
"汽锅丸子",
"汽锅鸡",
"过桥米线",
"牛肉米线",
"肥肠米线",
"排骨米线",
"热干面",
"腌笃鲜",
"蚂蚁上树",
"杭椒牛柳",
"辣子鸡",
"红烧牛肉",
"肉夹馍",
"凉皮",
"米皮",
"大盘鸡",
"甜水面",
"钟水饺",
"龙抄手",
"锅贴",
"猪豚骨拉面",
"海鲜拉面",
"日式担担面",
"烤鱿鱼",
"盐烧三文鱼",
"烤青花鱼",
"烤银鳕鱼",
"烤鳗鱼",
"无骨原味炸鸡",
"天妇罗",
"草莓冰淇淋",
"巧克力冰淇淋",
"香草冰淇淋",
"蛋包饭",
"四川泡菜",
"宫保虾球",
"干烧大黄鱼",
"清蒸鲈鱼",
"松仁玉米",
"蛋炒饭",
"章鱼小丸子",
"东坡肉",
"煮千丝",
"煎酿青红椒",
"香煎芙蓉蛋",
"四喜豆腐",
"鱼香茄子煲",
"滑蛋虾仁",
"龙骨玉米汤",
"文昌鸡",
"盐鸡",
"梅菜扣肉",
"鱼头豆腐汤",
"脆皮鸡",
"黄金咸蛋卷",
"椒盐鱼下巴",
"板栗煲蹄花",
"酱鸭",
"酱鸭舌",
"鹅肝",
"醉泥螺",
"西湖醉鱼",
"熏鱼",
"麻油萝卜",
"盐水煮毛豆",
"马兰头拌香干",
"洋葱爆腰花",
"冬笋炒羊肉",
"干菜焖肉",
"铁板牛蛙",
"板栗烧鸡",
"狮子头",
"海苔肉松豆腐",
"龙井虾仁",
"蜜汁莲藕",
"红枣莲子",
"腐皮卷",
"汤圆",
"粽子",
"九转大肠",
"醋溜白菜",
"泡椒肥牛",
"罗宋汤",
"菲力牛排",
"海胆饭",
"茶泡饭",
"寿喜烧",
"酸辣土豆丝",
"清炒土豆丝",
"鸡蛋卷",
"肝腰合炒",
"凉拌牛肉",
"蟹黄豆花",
"青椒皮蛋",
"烟笋腊肉",
"椒麻鸡",
"椒麻排骨",
"小炒黄牛肉",
"红烧带鱼",
"糖醋带鱼",
"凉拌折耳根",
"小笼包",
"叉烧包",
"奶黄芝麻豆沙包",
"大肉包",
"菜包",
"灌汤包"
];
FixedMainBtn.addEventListener("click", function (event) {
if (!Run) {
title.innerHTML = "今天吃什么？";
this.innerHTML = "给我停下来";
Timer = setInterval(function () {
const randomFood = List[Math.floor(Math.random() * List.length)];
const foodElement = document.createElement('div');
foodElement.className = 'random-food';
foodElement.textContent = randomFood;
foodElement.style.top = Math.ceil(Math.random() * (window.innerHeight - 50)) + 'px'
foodElement.style.left = Math.ceil(Math.random() * (window.innerWidth - 50)) + 'px'
foodElement.style.color = `rgba(0, 0, 0, ${Math.random()})`;
foodElement.style.fontSize = Math.ceil(Math.random() * (22 - 12) + 12) + 'px'
document.body.appendChild(foodElement);
itemElement.innerHTML = randomFood;
setTimeout(() => {
foodElement.classList.add('fade-out');
}, 90);
setTimeout(() => {
foodElement.remove();
}, 500);
}, 70)
Run = 1;
} else {
title.innerHTML = "就吃这个了";
this.innerHTML = "换一个";
clearInterval(Timer);
Run = 0;
}
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e2e2c76fef0ebe175345f1430272261";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
css文件
body{background:url('https://www.ytwes.com/web/img/6-1.jpg') repeat;user-select:none}.song_4_04_10{width:92%;max-width:600px;margin:0 auto;text-align:center;margin-top:10%}.song_4_04_10 .title{font-size:28px}.song_4_04_10 .FixedMainBtn{background:#666;color:#fff;line-height:60px;font-size:28px;font-weight:bold;cursor:pointer;caret-color:transparent;margin:0 auto;width:55%;margin-top:36px}.song_4_04_10 .Item{font-size:28px;font-weight:bold;height:40px;line-height:40px;overflow:hidden;margin-top:20px}.random-food{position:absolute;opacity:1;transition:opacity .6s ease-in-out}.random-food.fade-out{opacity:0}
本文链接：https://hqyman.cn/post/5832.html 非本站原创文章欢迎转载，原创文章需保留本站地址！
休息一下，本站随机推荐观看栏目:
