jq写转盘抽奖，调接口查询中奖，扇形布局

最新推荐文章于 2022-07-16 11:22:41 发布

weixin_34055787

最新推荐文章于 2022-07-16 11:22:41 发布

阅读量138

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wy90s/p/8467301.html

版权

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body>
 8     <div class="round-wrap">
 9         <div id="roundId">
10             <!--扇区-->
11             <div class="part-wrap">
12                 <div class="part">
13                     <div class="list"></div>
14                     <div class="list"></div>
15                     <div class="list"></div>
16                     <div class="list"></div>
17                     <div class="list"></div>
18                     <div class="list"></div>
19                     <div class="list"></div>
20                 </div>
21             </div>
22             <!--奖品名称-->
23             <div class="word-wrap">
24                 <div class="word">
25                     <div class="word-list"><span>100元</span></div>
26                     <div class="word-list"><span>200元</span></div>
27                     <div class="word-list"><span>300元</span></div>
28                     <div class="word-list"><span>400元</span></div>
29                     <div class="word-list"><span>500元</span></div>
30                     <div class="word-list"><span>600元</span></div>
31                     <div class="word-list"><span>谢谢参与</span></div>
32                 </div>
33             </div>
34         </div>
35         <!--点击go-->
36         <div class="click-bg">
37             go
38         </div>
39     </div>
40 </body>
41 </html>

css

 1 <style>
 2     html,body{
 3         font-size:625%;
 4         margin:0;padding:0;
 5     }
 6     .round-wrap{
 7         width: 5.54rem;
 8         height: 5.54rem;
 9         position: relative;
10     }
11     #roundId{
12         width: 5.54rem;
13         height: 5.54rem;
14         border-radius:50%;
15         overflow: hidden;
16         position: relative;
17         transform:rotate(0deg)
18     }
19     /*扇区*/
20     #roundId .part-wrap{
21         width: 100%;
22         height: 100%;
23         position: absolute;
24         left: 0;
25         top: 0;
26     }
27     #roundId .part-wrap .part{
28         width: 5.54rem;
29         height: 5.54rem;
30         box-sizing: border-box;
31         border-radius: 50%;
32         border: 1px solid #000000;
33         position: relative;
34     }
35     #roundId .part-wrap .part .list{
36         height: 50%;
37         width: 50%;
38         box-sizing: border-box;
39         border-bottom: 1px solid #dddddd;
40         transform-origin: bottom right;
41         position: absolute;
42         top: 0;
43         left: 0;
44     }
45     /*奖品名*/
46     #roundId .word-wrap{
47         width: 100%;
48         height: 100%;
49         display: flex;
50         align-items: center;
51         justify-content: center;
52         position: absolute;
53         left: 0;
54         top: 0;
55     }
56     #roundId .word-wrap .word{
57         width: 4rem;
58         height: 4rem;
59         position: relative;
60     }
61     #roundId .word-wrap .word .word-list{
62         width: 4rem;
63         height: 4rem;
64         display: flex;
65         justify-content: center;
66         position: absolute;
67         top: 0;
68         left: 0;
69     }
70     #roundId .word-wrap .word .word-list span{
71         display: inline-block;
72         font-size: .25rem;
73         color: #000;
74         text-align: center;
75         opacity: 0;
76     }
77     .click-bg{
78         position: absolute;
79         left: 50%;
80         top: 50%;
81         height: 1rem;
82         width: .4rem;
83         margin-left:-.2rem ;
84         margin-top: -.5rem;
85         box-sizing: border-box;
86         border: .01rem solid #dddddd;
87         background: beige;
88         font-size: .25rem;
89         line-height: 1rem;
90         text-align: center;
91         cursor: pointer;
92     }
93 </style>

 1 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 2 <script>
 3     $(function(){
 4         //假设奖品数量为7
 5         var allAwardCount = 7
 6         //扇区倾斜度公式
 7         var listSkew = 90-360/allAwardCount
 8         //每个扇区角度
 9         var rotateDegEach = 360/allAwardCount
10         //奖品名宽度
11         var awardListWords = parseInt( (Math.sin(rotateDegEach/2*0.017453293))*2*2 )
12         $('#roundId .word-list span').css({'width':awardListWords+'rem','opacity':1})
13         for(var index=0;index<allAwardCount;index++){
14             $('#roundId .list').eq(index).css('transform','rotate('+index*(360/allAwardCount)+'deg) skewX('+listSkew+'deg)')
15             $('#roundId .word-list').eq(index).css('transform','rotate('+(index*rotateDegEach+rotateDegEach/2-90)+'deg)')
16         }
17         //点击GO
18         $('.click-bg').click(function(){
19             drawBegin()
20         })
21 
22         var rotateDeg = 0                    //旋转角度,开始为0
23         var winningNum = ''                 //当前奖品序号0,1,2,3,4.........
24         var winningNumLast=''               //上一次奖品序号
25         var degaddNum = 360*6               //固定旋转度数
26         var canClicked = true              //抽奖可以点击
27         function drawBegin(){
28             if(canClicked){
29                 //按钮置为不可点击状态
30                 canClicked = false
31                 //调接口查询中奖情况，会返回code（200中奖，-10002未中奖）和中奖情况奖品名winningName ，这里假设 code=200,winningName='200元'
32                 var code=200
33                 var winningName='200元'
34                 if(code == -10002){
35                     winningNum = allAwardCount-1
36                 }else if(code == 200){
37                     for(var index=0;index<allAwardCount;index++){
38                         if(winningName == $('#roundId .word-list').eq(index).find('span').text()){
39                             winningNum = index
40                         }
41                     }
42                 }else{
43                     alert('查询异常')
44                     canClicked = true
45                     return
46                 }
47                 if(rotateDeg==0){
48                     rotateDeg = degaddNum + 360-rotateDegEach*(winningNum)+90-rotateDegEach/2
49                 }else{
50                     rotateDeg = rotateDeg + degaddNum + 360-rotateDegEach*(winningNum-winningNumLast)
51                 }
52                 //保存当前奖品号
53                 winningNumLast = winningNum
54                 $('#roundId').css({'transform':'rotate('+rotateDeg+'deg)','transition':'transform 4s ease-out'})
55             }
56         }
57         //监听旋转结束（兼容性写法）
58         document.getElementById('roundId').addEventListener('webkitTransitionEnd', function () {
59             alert('奖品为第'+(winningNum+1)+'个奖品')
60             canClicked = true
61         }, false)
62         document.getElementById('roundId').addEventListener('transitionend', function () {
63             alert('奖品为第'+(winningNum+1)+'个奖品')
64             canClicked = true
65         }, false)
66     })
67 </script>

转载于:https://www.cnblogs.com/wy90s/p/8467301.html

weixin_34055787

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq写转盘抽奖，调接口查询中奖，扇形布局

html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="round-wrap...
复制链接

扫一扫