抽奖 

  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>

 

posted @ 2022-10-10 17:27  不吃肉的羊  阅读(40)  评论(0)    收藏  举报