Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

  • preface

Hi, I’m _Peach. I’m a new peach. I wrote a little note today

  • Project experience

Clicking on a random recipe pauses again hahahahaha! Style a little ugly function or some

  • Idea of Function implementation
  1. We start by defining a recipe array. The main methods used here are the following
  2. Math.random() The function returns a floating point, pseudo random number in the range from0 –Less than1That is, go up from 0 (including 0), but not including 1 (excluding 1), and then you can scale to the desired range. Realize the initial seed selection to random number generation algorithm; It cannot be selected or reset by the user.
  3. Math.floor() Returns the sum of the largest integers less than or equal to a given number
  4. useinnerHTMLTo output the results to the page
  5. usesetIntervalCycle,clearIntervalTo clear the timer
  • Code implementation

HTML structure H1 tags and buttons

<h1></h1>
<a href="javascript:;">Have something for lunch today</a>
Copy the code

CSS code Settings under the style

    * {
      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;
    }
Copy the code

Js code

    let text = document.querySelector('h1');
    let btn = document.querySelector('a')
    let arr = ['Hand torn chicken'.'Deji Roast Goose'.'Clay Pot rice'.'Spicy spicy Pot'.'Ancient Kiln chicken'.Wing Kee Roast Goose.'Rice with garlic and flower shell'.'Pickled cabbage fish'.'Chongqing Gaigong Clay Pot'.'Dried fried beef river'.Zhanjiang White Sliced Chicken]
    let flag = true;
    btn.addEventListener('click'.function () {
      if (flag) {
        btn.innerHTML = 'No, next.'
        clearInterval(timer)
        timer = null;
        flag = false;
      } else {
        btn.innerHTML = 'Eat this.'
        timer = setInterval(() = > {
          outhtml();
        }, 100);
        flag = true; }})function outhtml() {
      text.innerHTML = arr[Math.floor(Math.random() * arr.length)];
    }
    let timer = setInterval(() = > {
      outhtml();
    }, 100);
Copy the code