当前位置：首页 > ds >正文

jquery实现移动端slotmachine抽奖游戏，中奖后并弹出地址填写框

ds 2025/8/13 8:04:30

项目中需要写一个抽奖的移动端的小游戏，于是就在网上找了一下插件，然后自己改动了一些样式，以下代码段仅供个人学习参考，非100%原创，有问题的地方可以提出来哦

页面效果：

以下分别为html+css+js代码：

先引用这几个文件：

【jquery.min.js 下载地址：http://www.jq22.com/jquery-info122

jquery.slotmachine.js 原插件下载地址：http://www.jq22.com/jquery-info433 修改后下载地址：http://pan.baidu.com/s/1nvBb8aH（链接失效，可留言）】

layer.js 使用参考http://layer.layui.com/mobile/【弹出页面层】

jquery.provincesCity.js和provincesData.js使用参考http://h-ui.net/ext/1401030938.shtml【城市三级联动】

 1 <div class="content tac">
 2                                 <div style="clear:both;">
 3                                     <div id="machine1" class="slotMachine">
 4                                         <div class="slot slot1"></div>
 5                                         <div class="slot slot2"></div>
 6                                         <div class="slot slot3"></div>
 7                                         <div class="slot slot4"></div>
 8                                         <div class="slot slot5"></div>
 9                                         <div class="slot slot6"></div>
10                                         <div class="slot slot7"></div>
11                                         <div class="slot slot8"></div>
12                                         <div class="slot slot9"></div>                
13                                     </div>
14                                     
15                                     <div id="machine2" class="slotMachine">
16                                         <div class="slot slot1"></div>
17                                         <div class="slot slot2"></div>
18                                         <div class="slot slot3"></div>
19                                         <div class="slot slot4"></div>
20                                         <div class="slot slot5"></div>
21                                         <div class="slot slot6"></div>
22                                         <div class="slot slot7"></div>
23                                         <div class="slot slot8"></div>
24                                         <div class="slot slot9"></div>
25                                     </div>
26                                     
27                                     <div id="machine3" class="slotMachine">
28                                         <div class="slot slot1"></div>
29                                         <div class="slot slot2"></div>
30                                         <div class="slot slot3"></div>
31                                         <div class="slot slot4"></div>
32                                         <div class="slot slot5"></div>
33                                         <div class="slot slot6"></div>
34                                         <div class="slot slot7"></div>
35                                         <div class="slot slot8"></div>
36                                         <div class="slot slot9"></div>
37                                     </div>    
38                                 </div>        
39                             </div>
40 
41             <div class="jf2 pr">
42                 <div id="slotMachineButton1" class="slotMachineButton">立即摇奖</div>
43                 <div class="you"></div>
44             </div>

 1 .slotMachineButton{
 2     width:1.05rem;
 3     height: 0.23rem;
 4     line-height: 0.23rem;
 5     background-color: #efe491;
 6     color: #ff0000;
 7     font-size: 0.18rem;
 8     text-align: center;
 9     border: 0.04rem solid #e8d961;
10     border-radius: 0.04rem;
11     margin: 0 auto;  
12 }
13 .content{
14     padding-top: 0.08rem;
15     padding-bottom: 0.05rem;
16 }
17 .slotMachine{
18     width:0.6rem;
19     height: 0.6rem;
20     overflow: hidden;
21     display: inline-block;
22     text-align: center;
23     border: 0.04rem solid #dedede;
24     background-color: #f2f2f2;
25     border-radius: 0.04rem;
26 }
27 .noBorder{
28     border:none !important;
29     background: transparent !important;
30 }
31 .slotMachine .slot{
32     width:0.6rem;
33     height:0.6rem;
34 }
35 .slot1{
36     background-image: url("../images/apple.png");
37     background-repeat: no-repeat;
38     background-size: 100% 100%;
39 }
40 .slot2{
41     background-image: url("../images/cherry.png");
42     background-repeat: no-repeat;
43     background-size: 100% 100%;
44 }
45 .slot3{
46     background-image: url("../images/diamond_big.png");
47     background-repeat: no-repeat;
48     background-size: 100% 100%;
49 }
50 .slot4{
51     background-image: url("../images/grape_big.png");
52     background-repeat: no-repeat;
53     background-size: 100% 100%;
54 }
55 .slot5{
56     background-image: url("../images/leaf.png");
57     background-repeat: no-repeat;
58     background-size: 100% 100%;
59 }
60 .slot6{
61     background-image: url("../images/lemon.png");
62     background-repeat: no-repeat;
63     background-size: 100% 100%;
64 }
65 .slot7{
66     background-image: url("../images/money.png");
67     background-repeat: no-repeat;
68     background-size: 100% 100%;
69 }
70 .slot8{
71     background-image: url("../images/strawberry.png");
72     background-repeat: no-repeat;
73     background-size: 100% 100%;
74 }.slot9{
75     background-image: url("../images/seven_big.png");
76     background-repeat: no-repeat;
77     background-size: 100% 100%;
78 }
79 .jf2{
80     width: 2.7rem;
81     background-color: #c8544b;
82     margin: 0 auto;
83     border-radius: 0.05rem;
84     padding-top: 0.1rem;
85     padding-bottom: 0.1rem;
86 }

 1 <style type="text/css">
 2         .edit label{
 3             display: block;
 4             width: 90%;
 5             height: 0.3rem;
 6             line-height: 0.3rem;
 7             margin-left: 5%;
 8             color: #777777;
 9 
10         }
11         .edit input{
12             width: 90%;
13             height: 0.3rem;
14             line-height: 0.3rem;
15             border: 0.01rem solid #e4e4e4;
16             margin-left: 5%;
17             color: #777777;
18             -webkit-appearance: none;
19             text-indent: 0.04rem;
20             font-size: 0.13rem;
21         }
22         .edit select{
23             width: 26%;
24             height: 0.3rem;
25             line-height: 0.3rem;
26             margin-left: 5%;
27             border: 0.01rem solid #e4e4e4;
28             color: #777777;
29             -webkit-appearance: none;
30             text-indent: 0.04rem;
31             font-size: 0.13rem;
32         }
33         .mb20{
34             margin-bottom: 0.2rem;
35         }
36         .edit textarea{
37             width: 90%;
38             border: 0.01rem solid #e4e4e4;
39             -webkit-appearance: none;
40             text-indent: 0.04rem;
41             margin-left: 5%;
42             font-size: 0.13rem;
43         }
44     </style>

 1 <script type="text/javascript">
 2 
 3 
 4                         $(document).ready(function(){
 5 
 6                         
 7                             var machine1 = $("#machine1").slotMachine({
 8                                 active    : 0,
 9                                 delay    : 500
10                             });
11                             
12                             var machine2 = $("#machine2").slotMachine({
13                                 active    : 1,
14                                 delay    : 500
15                             });
16                             
17                             var machine3 = $("#machine3").slotMachine({
18                                 active    : 2,
19                                 delay    : 500
20                             });
21                             
22                             function onComplete($el, active){
23                                 switch($el[0].id){
24                                     case 'machine1':
25                                         $("#machine1Result").text("Index: "+active.index);
26                                         break;
27                                     case 'machine2':
28                                         $("#machine2Result").text("Index: "+active.index);
29                                         break;
30                                     case 'machine3':
31                                         $("#machine3Result").text("Index: "+active.index);
32                                         break;
33                                 }
34                             }
35                             
36                             $("#slotMachineButton1").click(function(){
37 
38                                 
39 
40 
41                                 machine1.shuffle(3, onComplete);
42                                 
43                                 setTimeout(function(){
44                                     machine2.shuffle(3, onComplete);
45                                 }, 500);
46                                 
47                                 setTimeout(function(){
48                                     machine3.shuffle(3, onComplete);
49                                 }, 1000);
50                                 setTimeout(function(){//当确定中奖后点击OK关闭中奖提示框并弹出页面层填写地址等信息，点击保存则关闭所有弹出层及遮罩层
51                                     layer.open({
52                                         content: '没中奖'
53                                         ,btn: 'OK'
54                                         ,shadeClose: false
55                                         ,yes: function(msg){
56                                             layer.close(msg);
57                                         layer.open({
58                                         type: 1
59                                         ,content: '<div class="edit"><label for="">收货人：</label><input type="text" /></div>  <div class="edit"><label for="">联系电话：</label><input type="text" /></div><div class="edit" id="province"><label for="">所在地区：</label></div>    <div class="edit mb20"><label for="">详细地址：</label><textarea name="" id="" cols="30" rows="10"></textarea></div>'
60                                         ,anim: 'up'
61                                         ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 100%; padding-top:10px; border:none;'
62                                         ,btn: '保存'
63                                         ,yes:function(index){
64                                             layer.close(index);
65                                         }});
66                                 $("#province").ProvinceCity();
67     
68   }});
69                                 },3000);
70 
71                                 
72                                 
73                                 
74                             })
75                         });
76 </script>