PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Writing in the front

What’s for today? This problem often appears in our side, has become a big problem, coupled with the Spring Festival holiday, every day they do not know what to eat at home, thinking about writing a few lines of simple code to solve this problem.

This article is fairly simple, with very little content, and the end result looks like this:

So let’s implement this simple little case

HTML structure section

Because the content is relatively small, the HTML structure does not have any complex content, as follows:

<body>
  <main>
    <img class="bg" src="./img/bg.png" alt="bg" width="100%" />
    <h2 class="title" id="title">What's for today?</h2>
    <div class="btn-wrap">
      <button class="btn" id="btn">start</button>
    </div>
  </main>
</body>
Copy the code

There’s an image here, which is the one below

This is Chinese New Year, add a Spring Festival flavor.

CSS code

CSS is also relatively simple and has no content, as follows:

html {
  font-size: 16px;
}
body {
  margin: 0;
}
main {
  height: 844px;
  width: 390px;
  margin: 0 auto;
  position: relative;
  background-color: #ff2121;
}
@media (max-width: 758px) {
  main {
    height: 100vh;
    width: 100vw;
    position: relative; }}main .bg {
  margin-top: -32px;
}
main .title {
  text-align: center;
  font-weight: 500;
}
.btn-wrap {
  display: block;
  border: none;
  width: 120px;
  border-radius: 18px;
  position: absolute;
  bottom: 10rem;
  left: 0;
  right: 0;
  margin: auto;
}
.btn {
  background-color: #f6b760;
  cursor: pointer;
  border: none;
  height: 36px;
  width: 120px;
  border-radius: 18px;
  font-size: #fff;
  transition: all 0.1 s;
  font-size: 1rem;
}
.btn:active {
  background-color: #f6c860;
}
Copy the code

It is worth mentioning that this is where media queries are used, which is web and H5 compatible. For details on media queries, please refer to my other article:

5 minutes Quick access to CSS media query

JavaScript part

Here I add all the dishes I want to eat into an array, and then get them by randomly picking one of the items in the array. The code is as follows:

const $btn = document.getElementById('btn')
const $title = document.getElementById('title')
const arr = [ 'Shredded pork with fish flavor'.'Kung Pao Chicken'.'... ' ]
let timer = null
$btn.addEventListener('click'.event= > {
  if (event.target.innerHTML === '开始') {
    event.target.innerHTML = 'stop'
    timer = setInterval(() = > {
      $title.innerHTML =
        'Eat today' + arr[Math.floor(Math.random() * arr.length)]
    }, 50)}else {
    event.target.innerHTML = '开始'
    clearInterval(timer)
  }
})
Copy the code

Arr [math.floor (math.random () * arr.length)], where math.random () returns a pseudo-random number between 0 and 1, which may be equal to 0 but must be less than 1; The math.floor method returns the maximum integer (floor value) less than the parameter value.

The idea is to randomize a number from 0 to 1, then multiply it by the length of the array, for example, a random 0.3, the array is 11, and the final result is 3.3, then round it up to 3, and this is the index we want.

Write in the last

That’s the end of this article, which is generally quite simple and has no content.

Finally, the following articles are my participation in the nuggets essay activity, you can support:

  • Chinese New Year ~ I used CSS to draw a lantern, looking really festive
  • I used Vue3+TS to implement a New Year countdown component for various scenarios