随机抽奖

(((φ(◎ロ◎;)φ)))牵丝戏安

已于 2025-05-19 14:12:21 修改

阅读量169

点赞数 5

分类专栏： html CSS JS 文章标签： html5 js css

于 2025-05-19 14:07:22 首次发布

本文链接：https://blog.csdn.net/weixin_51341142/article/details/148062249

版权

html 同时被 3 个专栏收录

4 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

3 篇文章

订阅专栏

效果图

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>年会抽奖</title>
    <style>
      .wrapper {
        width: 840px;
        height: 420px;
        background: url(./bg01.jpg) no-repeat center / cover;
        padding: 100px 250px;
        box-sizing: border-box;
      }

      .wrapper span {
        color: #b10e0d;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <strong>年会抽奖</strong>
      <h1>一等奖：<span class="one">???</span></h1>
      <h3>二等奖：<span class="two">???</span></h3>
      <h5>三等奖：<span class="three">???</span></h5>
    </div>

    <script>
      //1.创建一个数组，用于存放人员名单
      const arr = ["牵丝戏安", "古力娜扎", "迪丽热巴", "马儿扎哈", "霜叶游侠"];
      //2.利用随机数选取数组中的名字
      const random1 = Math.floor(Math.random() * arr.length);
      // console.log(arr[random]);
      //3.把名字放入对应的盒子里  span
      // 一等奖
      const one = document.querySelector(".one");
      one.innerText = arr[random1];

      //4.不允许重复抽奖，要把刚才选出来的名字从数组中删除
      arr.splice(random1, 1);
      //二等奖
      const random2 = Math.floor(Math.random() * arr.length);
      // console.log(arr[random2]);
      const two = document.querySelector(".two");
      two.innerText = arr[random2];

      arr.splice(random2, 1);
      // 三等奖
      const random3 = Math.floor(Math.random() * arr.length);
      // console.log(arr[random]);
      const three = document.querySelector(".three");
      three.innerText = arr[random3];
    </script>
  </body>
</html>

背景图片