原生JS抽奖程序
2021/9/18 17:08:31
本文主要是介绍原生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~
这篇关于原生JS抽奖程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-21Vue3教程：新手入门到实践应用
- 2024-12-21VueRouter4教程：从入门到实践
- 2024-12-20Vue3项目实战：从入门到上手
- 2024-12-20Vue3项目实战：新手入门教程
- 2024-12-20VueRouter4项目实战：新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系？-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程：从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4：基础教程
- 2024-12-20Vuex4课程：新手入门到上手实战全攻略
