.
O
K
A
Y
A

JavaScript --- 随机点名抽奖系统 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>Document</title>
 9     <style>
10         .box span:first-child{
11             color: red;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <div class="box">
18         一等奖：<span>xxx</span><br>
19         二等奖：<span>xxx</span><br>
20         三等奖：<span>xxx</span>
21     </div>
22 
23     <script>
24 
25         const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友']
26         // 获取span标签
27         const a = document.querySelectorAll('span')
28         for (let i = 0; i <3; i++) {
29             // 获取随机数
30             let num = Math.floor(Math.random() * personArr.length) 
31             // 改变对应内容
32             a[i].innerHTML = `${personArr[num]}`
33             // 删除对应数组内容
34             personArr.splice(num, 1)
35         }
36 
37 
38         // 获取一等奖随机数
39         // let num = Math.floor(Math.random() * personArr.length) 
40         // // 修改一等奖span标签的内容
41         // a[0].innerHTML = `${personArr[num]}`
42         // // 从数组里减去筛选出的值
43         // personArr.splice(num, 1)
44 
45         // // 获取二等奖随机数
46         // let num2 = Math.floor(Math.random() * personArr.length)
47         // // 修改二等奖span标签的内容
48         // a[1].innerHTML = `${personArr[num2]}`
49         // // 从数组里减去筛选出的值
50         // personArr.splice(num2, 1)
51 
52         // // 获取三等奖随机数
53         // let num3 = Math.floor(Math.random() * personArr.length)
54         // // 修改三等奖span标签的内容
55         // a[2].innerHTML = `${personArr[num3]}`
56         // // 从数组里减去筛选出的值
57         // personArr.splice(num3, 1)
58     </script>
59 </body>
60 
61 </html>

当时没想到循环，今天看东西灵感突然出来了，简单很多

posted @ 2022-10-15 21:21  三井绫子  阅读(53)  评论(0)  编辑  收藏  举报