阅读 260

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

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

  • 前言

大家好,我是_Peach,一名刚入行的前端,今天无聊写了个小东西,记录下

  • 项目体验

点击随机菜谱 再次点击会暂停 哈哈哈哈哈!样式有点丑 功能还是有的 image.png

  • 功能实现思路
  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);
复制代码
文章分类
前端
文章标签