用html+js ，制作一个页面：帮你今天选吃什么-HQY 一个和谐有爱的空间

21

2024
04
14:35:11

用html+js ，制作一个页面：帮你今天选吃什么

一款极具趣味性的在线餐饮决策助手，旨在为面对琳琅满目美食选项而犹豫不决的用户，提供轻松愉快的随机推荐体验。该产品以简洁明快的网页界面呈现，只需轻点鼠标，即可在瞬间为用户揭晓今日餐单，让日常饮食选择变得简单又充满惊喜。

所运用的知识点

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>

<title>今天吃什么</title>

</head>

<body>

<div>

<div>今天吃什么？</div>

</div>

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>

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}

推荐本站淘宝优惠价购买喜欢的宝贝: