中午不知道吃啥子？今天来写一个随机菜谱

前言 大家好，我是_Peach，一名刚入行的前端，今天无聊写了个小东西，记录下 项目体验 点击循环菜谱 再次点击会暂停 哈哈哈哈哈！样式有点丑 功能还是有的 功能实现思路

1. 首先先定义一个菜谱数组，这里使用的主要方法是以下几点
2. Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
3. Math.floor() 返回小于或等于一个给定数字的最大整数和
4. 使用innerHTML来输出结果到页面上
5. 使用setInterval循环，clearInterval来清除定时器

代码实现 html结构 h1标签和按钮

<h1></h1>
<a href="javascript:;">今天中午吃啥子</a>

css代码设置下样式

* {
          
   
      padding: 0;
      margin: 0;
    }
    body {
          
   
      text-align: center;
      background: rgba(207, 213, 225);

    }
    h1 {
          
   
      margin: 50px auto;
    }
    a {
          
   
      display: inline-block;
      width: 20%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      font-size: 18px;
      text-decoration: none;
      background: #f60;
    }

js代码

let text = document.querySelector(h1);
    let btn = document.querySelector(a)
    let arr = [手撕鸡, 德记烧鹅, 煲仔饭, 麻辣香锅, 古法窑鸡,荣记烧鹅, 蒜蓉花甲饭, 酸菜鱼, 重庆鸡公煲, 干炒牛河, 湛江白切鸡]
    let flag = true;
    btn.addEventListener(click, function () {
          
   
      if (flag) {
          
   
        btn.innerHTML = 不想吃，下一个
        clearInterval(timer)
        timer = null;
        flag = false;
      } else {
          
   
        btn.innerHTML = 就吃这个
        timer = setInterval(() => {
          
   
          outhtml();
        }, 100);
        flag = true;
      }
    })
    function outhtml() {
          
   
      text.innerHTML = arr[Math.floor(Math.random() * arr.length)];
    }
    let timer = setInterval(() => {
          
   
      outhtml();
    }, 100);