原生JS抽奖程序

用于记录学习过程

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>友好的抽奖环节</title>
  6 </head>
  7 <style>
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12 
 13     body {
 14         display: flex;
 15         justify-content: center;
 16         align-items: center;
 17         height: 100vh;
 18     }
 19 
 20     .outher, .wapper {
 21         position: relative;
 22         width: 300px;
 23         height: 300px;
 24         background-color: red;
 25         border-radius: 50%;
 26         overflow: hidden;
 27     }
 28     .wapper{
 29         transform: rotate(22.5deg);
 30     }
 31 
 32     .left, .right {
 33         width: 150px;
 34         height: 100%;
 35         overflow: hidden;
 36         position: absolute;
 37     }
 38 
 39     .left div, .right div {
 40         position: absolute;
 41         width: 150px;
 42         height: 100%;
 43     }
 44 
 45     .left div {
 46         transform-origin: right center;
 47     }
 48 
 49     .right div {
 50         transform-origin: left center;
 51     }
 52 
 53     .left {
 54         left: 0;
 55         background-color: burlywood;
 56     }
 57 
 58     .right {
 59         right: 0;
 60         background-color: blue;
 61     }
 62 
 63     .left div.one {
 64         background-color: yellow;
 65     }
 66 
 67     .left div.two {
 68         background-color: darkorange;
 69         transform: rotate(-45deg);
 70     }
 71 
 72     .left div.three {
 73         background-color: yellow;
 74         transform: rotate(-90deg);
 75     }
 76 
 77     .left div.four {
 78         background-color: darkorange;
 79         transform: rotate(-135deg);
 80     }
 81 
 82     .right div.one {
 83         background-color: darkorange;
 84     }
 85 
 86     .right div.two {
 87         background-color: yellow;
 88         transform: rotate(45deg);
 89     }
 90 
 91     .right div.three {
 92         background-color: darkorange;
 93         transform: rotate(90deg);
 94     }
 95 
 96     .right div.four {
 97         background-color: yellow;
 98         transform: rotate(135deg);
 99     }
100 
101     .left .text {
102         position: absolute;
103         left: 45%;
104         top: 30px;
105         transform: rotate(-30deg);
106     }
107 
108     .right .text {
109         position: absolute;
110         right: 45%;
111         top: 30px;
112         transform: rotate(30deg);
113     }
114 
115     .circle {
116         position: absolute;
117         width: 80px;
118         height: 80px;
119         background-color: orange;
120         left: 50%;
121         top: 50%;
122         transform: translate(-50%, -50%);
123         border-radius: 50%;
124         text-align: center;
125         line-height: 80px;
126         font-size: 20px;
127         user-select: none;
128     }
129 
130     .circle::after {
131         content: "";
132         position: absolute;
133         top: -70px;
134         left: 50%;
135         transform: translate(-50%);
136         border: 40px solid orange;
137         border-left-width: 10px;
138         border-right-width: 10px;
139         border-left-color: transparent;
140         border-top-color: transparent;
141         border-right-color: transparent;
142     }
143 
144 
145 </style>
146 <body>
147 <div class="outher">
148     <div class="wapper">
149         <div class="left">
150             <div class="one">
151                 <span class="text">特等奖</span>
152             </div>
153             <div class="two"><span class="text">特等奖</span></div>
154             <div class="three"><span class="text">特等奖</span></div>
155             <div class="four"><span class="text">特等奖</span></div>
156         </div>
157         <div class="right">
158             <div class="one"><span class="text">特等奖</span></div>
159             <div class="two"><span class="text">特等奖</span></div>
160             <div class="three"><span class="text">特等奖</span></div>
161             <div class="four"><span class="text">特等奖</span></div>
162         </div>
163     </div>
164     <div class="circle">
165         抽奖
166     </div>
167 </div>
168 <script>
169     let wapper = document.querySelector(".wapper");
170     let textAll = document.querySelectorAll(".text");
171     let isFlag = true;
172 
173     let texts = ['钻石奖','铂金奖','黄金奖','白银奖','鼓励奖','塑料奖','黑铁奖','青铜奖'];
174     let textss = ['恭喜您获得MVP，SSVIP，钻石大奖，暂不揭晓！￥_￥','不错哟，铂金奖，不过什么也没有>_<',
175         '恭喜获得黄金奖，emmm...没有奖励，送你点好运气吧qaq','恭喜获得白银奖，是我们策划马同学的么么哒一个！',
176         '恭喜您！获得马同学一个抱抱！QAQ','塑料也是奖吗？下一位！','啊这，祝你排位十连胜吧！','恭喜，很想送您奖品，但是没经费了，给多加点辣椒吧！'
177     ];
178     for(let i =0; i<textAll.length; i++){
179         textAll[i].innerHTML = texts[i];
180     }
181     let random = parseInt(Math.random()*8);
182     document.querySelector(".circle").onclick = function () {
183         if(isFlag){
184             switch (random) {
185                 case 0:
186                     run(22.5,texts[random]);
187                     break;
188                 case 1:
189                     run(66.5,texts[random]);
190                     break;
191                 case 2:
192                     run(112.5,texts[random]);
193                     break;
194                 case 3:
195                     run(157.5,texts[random]);
196                     break;
197                 case 4:
198                     run(338.5,texts[random]);
199                     break;
200                 case 5:
201                     run(294.5,texts[random]);
202                     break;
203                 case 6:
204                     run(247.5,texts[random]);
205                     break;
206                 case 7:
207                     run(201.5,texts[random]);
208                     break;
209             }
210         }
211     }
212     let timer = null;
213     function run(angle,text) {
214         console.log(angle,text);
215         isFlag = false;
216         let begin = 0;
217         let basic = 1800;
218         timer = setInterval(function () {
219             if(begin>=(basic+angle)){
220                 isFlag = true;
221                 clearInterval(timer);
222             }
223             wapper.style.transform = "rotate("+begin+"deg)";
224             begin += (basic+angle-begin)*0.1;    //只能抽一次
225             // begin += Math.ceil((basic+angle-begin)*0.1);   //无限制
226         },50);
227         setTimeout("alert(textss[random])",4000);
228     }
229 
230 </script>
231 
232 
233 
234 </body>
235 </html>

稍加修改，面对不同的应用场景。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>友好的抽奖环节</title>
  6 </head>
  7 <style>
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12 
 13     body {
 14         display: flex;
 15         justify-content: center;
 16         align-items: center;
 17         height: 100vh;
 18     }
 19 
 20     .outher, .wapper {
 21         position: relative;
 22         width: 300px;
 23         height: 300px;
 24         background-color: red;
 25         border-radius: 50%;
 26         overflow: hidden;
 27     }
 28     .wapper{
 29         transform: rotate(22.5deg);
 30     }
 31 
 32     .left, .right {
 33         width: 150px;
 34         height: 100%;
 35         overflow: hidden;
 36         position: absolute;
 37     }
 38 
 39     .left div, .right div {
 40         position: absolute;
 41         width: 150px;
 42         height: 100%;
 43     }
 44 
 45     .left div {
 46         transform-origin: right center;
 47     }
 48 
 49     .right div {
 50         transform-origin: left center;
 51     }
 52 
 53     .left {
 54         left: 0;
 55         background-color: burlywood;
 56     }
 57 
 58     .right {
 59         right: 0;
 60         background-color: blue;
 61     }
 62 
 63     .left div.one {
 64         background-color: greenyellow;
 65     }
 66 
 67     .left div.two {
 68         background-color: orangered;
 69         transform: rotate(-45deg);
 70     }
 71 
 72     .left div.three {
 73         background-color: greenyellow;
 74         transform: rotate(-90deg);
 75     }
 76 
 77     .left div.four {
 78         background-color: orangered;
 79         transform: rotate(-135deg);
 80     }
 81 
 82     .right div.one {
 83         background-color: orangered;
 84     }
 85 
 86     .right div.two {
 87         background-color: greenyellow;
 88         transform: rotate(45deg);
 89     }
 90 
 91     .right div.three {
 92         background-color: orangered;
 93         transform: rotate(90deg);
 94     }
 95 
 96     .right div.four {
 97         background-color: greenyellow;
 98         transform: rotate(135deg);
 99     }
100 
101     .left .text {
102         position: absolute;
103         left: 45%;
104         top: 30px;
105         transform: rotate(-30deg);
106     }
107 
108     .right .text {
109         position: absolute;
110         right: 45%;
111         top: 30px;
112         transform: rotate(30deg);
113     }
114 
115     .circle {
116         position: absolute;
117         width: 80px;
118         height: 80px;
119         background-color: orange;
120         left: 50%;
121         top: 50%;
122         transform: translate(-50%, -50%);
123         border-radius: 50%;
124         text-align: center;
125         line-height: 80px;
126         font-size: 20px;
127         user-select: none;
128     }
129 
130     .circle::after {
131         content: "";
132         position: absolute;
133         top: -70px;
134         left: 50%;
135         transform: translate(-50%);
136         border: 40px solid orange;
137         border-left-width: 10px;
138         border-right-width: 10px;
139         border-left-color: transparent;
140         border-top-color: transparent;
141         border-right-color: transparent;
142     }
143 
144 
145 </style>
146 <body>
147 <div class="outher">
148     <div class="wapper">
149         <div class="left">
150             <div class="one">
151                 <span class="text">特等奖</span>
152             </div>
153             <div class="two"><span class="text">特等奖</span></div>
154             <div class="three"><span class="text">特等奖</span></div>
155             <div class="four"><span class="text">特等奖</span></div>
156         </div>
157         <div class="right">
158             <div class="one"><span class="text">特等奖</span></div>
159             <div class="two"><span class="text">特等奖</span></div>
160             <div class="three"><span class="text">特等奖</span></div>
161             <div class="four"><span class="text">特等奖</span></div>
162         </div>
163     </div>
164     <div class="circle">
165         抽奖
166     </div>
167 </div>
168 <script>
169     let wapper = document.querySelector(".wapper");
170     let textAll = document.querySelectorAll(".text");
171     let isFlag = true;
172 
173     let texts = ['下次一定','肉串*2','再来一次','肉串*2','和一个帅哥合影','再来一次','素菜*2','下次一定'];
174     // let textss = ['恭喜您获得MVP，SSVIP，钻石大奖，暂不揭晓！￥_￥','不错哟，铂金奖，不过什么也没有>_<',
175     //     '恭喜获得黄金奖，emmm...没有奖励，送你点好运气吧qaq','恭喜获得白银奖，是我们策划马同学的么么哒一个！',
176     //     '恭喜您！获得马同学一个抱抱！QAQ','塑料也是奖吗？下一位！','啊这，祝你排位十连胜吧！','恭喜，很想送您奖品，但是没经费了，给多加点辣椒吧！'
177     // ];
178     for(let i =0; i<textAll.length; i++){
179         textAll[i].innerHTML = texts[i];
180     }
181 
182     document.querySelector(".circle").onclick = function () {
183         if(isFlag){
184             let random = parseInt(Math.random()*8);
185             switch (random) {
186                 case 0:
187                     run(22.5,texts[random]);
188                     break;
189                 case 1:
190                     run(66.5,texts[random]);
191                     break;
192                 case 2:
193                     run(112.5,texts[random]);
194                     break;
195                 case 3:
196                     run(157.5,texts[random]);
197                     break;
198                 case 4:
199                     run(338.5,texts[random]);
200                     break;
201                 case 5:
202                     run(294.5,texts[random]);
203                     break;
204                 case 6:
205                     run(247.5,texts[random]);
206                     break;
207                 case 7:
208                     run(201.5,texts[random]);
209                     break;
210             }
211         }
212     }
213     let timer = null;
214     function run(angle,text) {
215         console.log(angle,text);
216         isFlag = false;
217         let begin = 0;
218         let basic = 5400;
219         timer = setInterval(function () {
220             if(begin>=(basic+angle)){
221                 isFlag = true;
222                 clearInterval(timer);
223             }
224             wapper.style.transform = "rotate("+begin+"deg)";
225             // begin += (basic+angle-begin)*0.1;    //只能抽一次
226             begin += Math.ceil((basic+angle-begin)*0.1);   //无限制
227         },50);
228         // setTimeout("alert(texts[random])",4000);
229     }
230 
231 </script>
232 
233 
234 
235 </body>
236 </html>

代码搬运，方便寻找。over~

posted @ 2021-09-18 14:20 木_糖阅读(113) 评论(0) 编辑收藏举报

刷新页面返回顶部

木_糖

原生JS抽奖程序

公告