原生js輪盤抽獎實例分析（幸運大轉盤抽獎）

時間 2019-12-08

標籤原生輪盤抽獎實例分析幸運轉盤欄目 JavaScript 简体版

原文原文鏈接

效果圖：css

所需圖片素材：html

這張圖是pointer.png的位置的。dom

turntable-bg.jpg這張是轉盤背景圖，在背景位置。函數

這張是turntable.png位置的。 url

須要這三張圖片，若是要實現一下，直接另存這三圖片引入進去便可。若是不會請修改爲對應的圖片名字，放到同一個文件下。spa

基本原理：3d

1，經過設置CSS樣式的position屬性，z-index屬性等實現背景圖，轉盤圖與指針圖的層疊擺放；指針

2，經過設置元素style.transform = "rotate(0deg)"實現旋轉效果。code

完整代碼以下：orm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="description" content="">
 6     <meta name="author" content="熊仔其人">
 7     <title>轉盤抽獎效果</title>
 8     <!-- 這裏是css部分 -->
 9     <style>
10         #bg {
11             width: 650px;
12             height: 600px;
13             margin: 0 auto;
14             background: url(turntable-bg.jpg) no-repeat;
15             position: relative;
16         }
17 
18         img[src^="pointer"] {
19             position: absolute;
20             z-index: 10;
21             top: 155px;
22             left: 247px;
23         }
24 
25         img[src^="turntable"] {
26             position: absolute;
27             z-index: 5;
28             top: 60px;
29             left: 116px;
30             transition: all 4s;
31         }
32     </style>
33 </head>
34 <body>
35     <!-- 這裏是HTML結構部分 --> 
36     <div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div>  
37     <!-- 這裏是js部分 -->
38     <script>
39         var oPointer = document.getElementsByTagName("img")[0];
40         var oTurntable = document.getElementsByTagName("img")[1];
41         var cat = 51.4; //總共7個扇形區域，每一個區域約51.4度
42         var num = 0; //轉圈結束後停留的度數
43         var offOn = true; //是否正在抽獎
44         oPointer.onclick = function () {
45             if (offOn) {
46                 oTurntable.style.transform = "rotate(0deg)";
47                 offOn = !offOn;
48                 ratating();
49             }
50         }
51         //旋轉
52         function ratating() {
53             var timer = null;
54             var rdm = 0; //隨機度數
55             clearInterval(timer);
56             timer = setInterval(function () {
57                 if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600); }
58                 else {
59                     oTurntable.style.transform = "rotate(" + rdm + "deg)";
60                     clearInterval(timer);
61                     setTimeout(function () {
62                         offOn = !offOn;
63                         num = rdm % 360;
64                         if (num <= cat * 1) { alert("4999元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "4999元"); }
65                         else if (num <= cat * 2) { alert("50元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "50元"); }
66                         else if (num <= cat * 3) { alert("10元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "10元"); }
67                         else if (num <= cat * 4) { alert("5元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "5元"); }
68                         else if (num <= cat * 5) { alert("免息服務"); console.log("rdm=" + rdm + "，num=" + num + "，" + "免息服務"); }
69                         else if (num <= cat * 6) { alert("提交白金"); console.log("rdm=" + rdm + "，num=" + num + "，" + "提交白金"); }
70                         else if (num <= cat * 7) { alert("未中獎"); console.log("rdm=" + rdm + "，num=" + num + "，" + "未中獎"); }
71                     }, 4000);
72                 }
73             }, 30);
74         }
75     </script>
76 </body>
77 </html>

css和HTML代碼很少，主要是爲了實現過渡設置，還有爲了實現層疊而使用position定位，讓元素脫離文檔流，js代碼在於獲取元素和事件的點擊，點擊指針會旋轉，因此要給指針加個點擊事件，而後是判斷旋轉是否中止，若是沒有就點擊也不能調用函數ratating()，這個函數執行轉盤的旋轉和判斷指針停在什麼位置，而後彈出相應的內容，而函數裏實現旋轉的過程，是獲取轉盤的元素，而後使用js控制css的屬性-transform：rotate()，咱們不是使用過這個屬性在css裏直接使它實現旋轉的效果嗎？就是和僞類選擇器:hover及過渡屬性一塊兒使用去實現的，那麼由於css實現不了數字的運算和鼠標點擊，因此讓js去實現且控制css屬性，實現到點擊旋轉這個功能，然而定時器的使用暫時不說，思路就是使用js實現數字的運算和鼠標的點擊及css屬性的控制達到旋轉的效果。Math.random()是隨機數的生成，Math.floor()向下取整。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。