wed前端第三次作业

一：使用js完成抽奖项目效果和内容自定义，可以模仿游戏抽奖页面

1、相关代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抽奖活动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    h2 {
      text-align: center;
    }
    .box {
      width: 600px;
      margin: 50px auto;
      display: flex;
      font-size: 25px;
      line-height: 40px;
    }
    .qs {
      width: 450px;
      height: 40px;
      color: red;
 
    }
    .btns {
      text-align: center;
    }
    .btns button {
      width: 120px;
      height: 35px;
      margin: 0 50px;
    }
    .selected {
      width: 600px;
      margin: 50px auto;
      display: flex;
      font-size: 25px;
      line-height: 40px;
    }
    .list {
      color: red;
    }
  </style>
</head>
<body>
    <h2>随机抽奖</h2>
    <div class="box">
        <span>当前奖品：</span>
        <div class="qs">点击开始抽奖</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
        <div class="selected">
        <span>已获奖品：</span>
        <div class="list"></div>
    </div>
    <script>
        // 奖品池 
        const prizes = [
            'iPhone 15 Pro',
            'Switch 游戏机',
            '小米平板 6',
            '100 元话费',
            '蓝牙耳机',
            '腾讯视频年卡',
            '机械键盘',
            '充电宝',
            '抱枕',
            '谢谢参与',
            '再来一次'
        ];
        let timerId = 0;
        let random    = 0;
        const qs      = document.querySelector('.qs');
        const listBox = document.querySelector('.list');
        const start   = document.querySelector('.start');
        const end     = document.querySelector('.end');
        start.addEventListener('click', () => {
            if (prizes.length <= 1) {
                start.disabled = end.disabled = true;
                return;
            }
            timerId = setInterval(() => {
                random = Math.floor(Math.random() * prizes.length);
                qs.textContent = prizes[random];
            }, 100);
        });
        end.addEventListener('click', () => {
            clearInterval(timerId);
            const prize = prizes.splice(random, 1)[0]; 
            showPrize(prize);
        });
        function showPrize(prize) {
            const div = document.createElement('div');
            div.textContent = prize;
            listBox.appendChild(div);
        }
    </script>
</body>
</html>

2、运行结果

可以连续抽奖十次

wed前端第三次作业

一：使用js完成抽奖项目 效果和内容自定义，可以模仿游戏抽奖页面

1、相关代码

2、运行结果

一：使用js完成抽奖项目效果和内容自定义，可以模仿游戏抽奖页面