解决 “今天中午吃什么” 的超实用帮手来袭

本文链接：https://blog.csdn.net/2302_79577253/article/details/145040579

还在每个工作日的中午，为吃什么而纠结到头秃？别愁啦！这款超贴心的工具专为解决 “今天中午吃什么” 难题而生。

技术架构超靠谱

采用全后端分离架构，前端巧妙运用 Vue.js，搭配腾讯云的 AI 服务来处理自然语言理解与生成，稳稳拿捏你的用餐偏好

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>今天中午吃什么</title>
<style>
  body {
    background-color: #ADD8E6; /* 设置蓝色背景 */
    color: #000; /* 设置文字颜色为黑色 */
    font-family: Arial, sans-serif;
    text-align: center;
    padding-top: 50px;
    overflow: hidden; /* 防止动画溢出 */
  }
  #food-list {
    display: none; /* 隐藏食物列表 */
  }
  #result {
    margin-top: 20px;
    font-size: 24px;
    transition: all 0.5s; /* 添加过渡效果 */
  }
  button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer; /* 鼠标悬停时显示为指针 */
  }
  /* 摇滚风格动画 */
  @keyframes rock {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
  }
</style>
</head>
<body>

<h1>今天中午吃什么？</h1>
<button id="choose-food">点击选择食物</button>
<div id="result"></div>

<script>
  // 食物列表
  const foods = [
    '米饭', '面条', '馒头', '饺子', '炒鸡蛋', '红烧肉', '鱼香肉丝',
    '宫保鸡丁', '麻婆豆腐', '糖醋排骨', '烤鸡翅', '汉堡包', '披萨',
    '意大利面', '寿司', '沙拉', '三明治', '炒饭', '炒面', '烤肉'
  ];

  let clicked = false; // 标记按钮是否已经被点击过

  // 获取按钮和结果显示元素
  const button = document.getElementById('choose-food');
  const result = document.getElementById('result');

  // 点击事件处理函数
  button.addEventListener('click', function() {
    if (!clicked) {
      // 第一次点击按钮，不做任何事情，只是设置标记
      clicked = true;
    } else {
      // 第二次点击按钮，随机选择食物并显示结果
      const randomIndex = Math.floor(Math.random() * foods.length);
      result.textContent = '今天中午吃：' + foods[randomIndex];
      result.style.animation = 'rock 0.5s infinite'; // 应用摇滚动画
      setTimeout(() => {
        result.style.animation = ''; // 动画播放完毕后移除动画
        clicked = false; // 重置点击状态
      }, 2500); // 2.5秒后重置动画和点击状态
    }
  });
</script>

</body>
</html>

贴心功能亮点多

关键技术有巧思：不只是推荐菜品，还加了样式修改与主题声明功能，界面看着舒心又清爽。
AI 助力超得力：腾讯云 AI 代码助手全程开挂，既能秒懂代码逻辑，给页面精准加上吸睛的 title；还能靠提问，快速黏贴代码，增添超实用的点赞确认提示。从此告别午餐选择困难症，让纠结的中午变得轻松又美味

具体实验室视频地址：https://download.csdn.net/download/2302_79577253/90245315