帮助困难选择症做选择

最新推荐文章于 2025-08-05 15:28:01 发布

原创最新推荐文章于 2025-08-05 15:28:01 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        color: red;
        text-align: center;
        background-image: url("./img/constellation.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        height: 90vh;
      }
    </style>
  </head>
  <body>
    <div style="margin-top: 80px">
      <h1
        id="titleId"
        style="
          height: 50px;
          border: 2px dashed red;
          background: linear-gradient(to right, orange, skyblue);
        "
      ></h1>
      <button id="btn" style="font-size: 35px">开始</button>
    </div>
    <script>
      let arrlist = [
        "蒸饺",
        "麻辣烫",
        "刀削面",
        "老头吃的面",
        "煮馍",
        "鱼粉",
        "德源",
        "魏家凉皮",
        "泡饼",
        "粉汤养血",
        "马天小炒",
        "大餐",
      ];
      let timer = null;
      let isTrue = false;
      btn.onclick = () => {
        isTrue = !isTrue;
        if (isTrue) {
          btn.innerHTML = "暂停";
          timer = setInterval(() => {
            let randomIndex = Math.floor(Math.random() * arrlist.length);
            let randomElement = arrlist[randomIndex];
            titleId.innerHTML = randomElement;
          }, 50);
        } else {
          btn.innerHTML = "开始";
          clearInterval(timer);
        }
      };
    </script>
  </body>
</html>