程序员必备小知识之选择困难症，让Javascript替你选择

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

• 前言 大家好，我是_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);