原生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抽奖程序
原文：https://www.cnblogs.com/mu-tang/p/15308540.html