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 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 body {
16 width: 100%;
17 height: 100vh;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 background: #333;
22 overflow: hidden;
23 }
24
25 .list {
26 width: 400px;
27 height: 400px;
28 border: 1px solid #fff;
29 border-radius: 50%;
30 display: flex;
31 align-items: center;
32 justify-content: center;
33 position: relative;
34 }
35 /* 红色箭头 */
36 .list::after {
37 content: '';
38 position: absolute;
39 width: 0;
40 height: 0;
41 border-width: 6px;
42 border-style: solid;
43 border-color: transparent transparent transparent red;
44 right: 0;
45 }
46
47 .list::before {
48 content: attr(data);
49 position: absolute;
50 color: #1e90ff;
51 font-size: 64px;
52 }
53
54 .list span {
55 color: #fff;
56 position: absolute;
57 width: calc(100% + 120px);
58 height: 20px;
59 text-align: right;
60 transition: 0.01s linear;
61 user-select: none;
62 }
63 </style>
64 </head>
65
66 <body>
67 <div class="list"></div>
68 </body>
69
70 </html>
71 <script>
72 class Lottery {
73 constructor() {
74 this.list = document.querySelector('.list');
75 this.randomSurnam = ["赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈", "褚", "卫", "蒋", "沈", "韩", "杨"];
76 this.randomName = ["泽", "桐", "梓", "一", "宁", "梅", "生", "平", "明", "涵", "韵", "宸", "坤", "华", "星", "家"];
77 this.names = [];
78 this.run = true;
79 this.deg = 0;
80 this.slow = 0;
81 this.init()
82 }
83 init() {
84 for (let i = 0; i < 40; i++) {
85 this.names.push(
86 this.randomSurnam[Math.random() * this.randomSurnam.length | 0] +
87 this.randomName[Math.random() * this.randomName.length | 0] +
88 this.randomName[Math.random() * this.randomName.length | 0]
89 )
90 }
91
92 for (let key in this.names) {
93 let span = document.createElement('span');
94 span.innerText = this.names[key];
95 this.list.appendChild(span);
96 }
97 this.event()
98 }
99 draw() {
100 const spans = this.list.children;
101 for (let i = 0; i < spans.length; i++) {
102 let span = spans[i];
103 span.style.transform = `rotate(${i / this.names.length * 360 + this.deg}deg)`;
104 span.style.color = '#fff';
105 }
106 const now = ((360 - this.deg) / 360 * this.names.length | 0) % this.names.length;
107 this.list.setAttribute('data', this.names[now]);
108 spans[now].style.color = 'red';
109 if (this.run) {
110 this.slow = 1;
111 } else {
112 this.slow = this.slow * 0.995;
113 }
114 this.deg -= this.slow;
115 }
116 animate() {
117 setInterval(() => this.draw(), 10);
118 }
119 event() {
120 document.addEventListener('keyup', (e) => {
121 if (e.code === 'Space') {
122 this.run = !this.run;
123 }
124 });
125 }
126 }
127 new Lottery().animate()
128 </script>
标签：抽奖,span,list,length,slow,let,names From： https://www.cnblogs.com/sheep-fu/p/16776517.html