├── pages
    ├── logs
    │   ├── logs.json
    │   ├── logs.wxss
    │   ├── logs.wxml
    │   └── logs.js
    └── index
    │   ├── index.wxss
    │   ├── index.wxml
    │   └── index.js
├── images
    ├── item.png
    ├── item1.png
    ├── dianjichoujiang.png
    └── dianjichoujiangd.png
├── resource
    ├── search.gif
    └── {]8S7$((LO83HT@FU%C_CTQ.png
├── README.md
├── app.wxss
├── app.json
├── utils
    └── util.js
├── project.config.json
└── app.js


/pages/logs/logs.json:
--------------------------------------------------------------------------------
1 | {
2 |   "navigationBarTitleText": "查看启动日志"
3 | }


--------------------------------------------------------------------------------
/images/item.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/images/item.png


--------------------------------------------------------------------------------
/images/item1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/images/item1.png


--------------------------------------------------------------------------------
/resource/search.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/resource/search.gif


--------------------------------------------------------------------------------
/images/dianjichoujiang.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/images/dianjichoujiang.png


--------------------------------------------------------------------------------
/images/dianjichoujiangd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/images/dianjichoujiangd.png


--------------------------------------------------------------------------------
/resource/{]8S7$((LO83HT@FU%C_CTQ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dukaixuan/jiugongge/HEAD/resource/{]8S7$((LO83HT@FU%C_CTQ.png


--------------------------------------------------------------------------------
/pages/logs/logs.wxss:
--------------------------------------------------------------------------------
1 | .log-list {
2 |   display: flex;
3 |   flex-direction: column;
4 |   padding: 40rpx;
5 | }
6 | .log-item {
7 |   margin: 10rpx;
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/logs/logs.wxml:
--------------------------------------------------------------------------------
1 | <!--logs.wxml-->
2 | <view class="container log-list">
3 |   <block wx:for="{{logs}}" wx:for-item="log">
4 |     <text class="log-item">{{index + 1}}. {{log}}</text>
5 |   </block>
6 | </view>
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jiugongge
2 | 微信小程序九宫格抽奖
3 | 效果图较卡顿真实效果是旋转的
4 | 
5 | ![image](https://github.com/dukaixuan/jiugongge/blob/master/resource/search.gif)
6 | 
7 | 
8 | 介绍地址：https://blog.csdn.net/du591310450/article/details/83014445
9 | 


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
 1 | /**app.wxss**/
 2 | .container {
 3 |   height: 100%;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   align-items: center;
 7 |   justify-content: space-between;
 8 |   padding: 200rpx 0;
 9 |   box-sizing: border-box;
10 | } 
11 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages":[
 3 |     "pages/index/index",
 4 |     "pages/logs/logs"
 5 |   ],
 6 |   "window":{
 7 |     "backgroundTextStyle":"light",
 8 |     "navigationBarBackgroundColor": "#fff",
 9 |     "navigationBarTitleText": "WeChat",
10 |     "navigationBarTextStyle":"black"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/pages/logs/logs.js:
--------------------------------------------------------------------------------
 1 | //logs.js
 2 | const util = require('../../utils/util.js')
 3 | 
 4 | Page({
 5 |   data: {
 6 |     logs: []
 7 |   },
 8 |   onLoad: function () {
 9 |     this.setData({
10 |       logs: (wx.getStorageSync('logs') || []).map(log => {
11 |         return util.formatTime(new Date(log))
12 |       })
13 |     })
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/utils/util.js:
--------------------------------------------------------------------------------
 1 | const formatTime = date => {
 2 |   const year = date.getFullYear()
 3 |   const month = date.getMonth() + 1
 4 |   const day = date.getDate()
 5 |   const hour = date.getHours()
 6 |   const minute = date.getMinutes()
 7 |   const second = date.getSeconds()
 8 | 
 9 |   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
10 | }
11 | 
12 | const formatNumber = n => {
13 |   n = n.toString()
14 |   return n[1] ? n : '0' + n
15 | }
16 | 
17 | module.exports = {
18 |   formatTime: formatTime
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
 1 | /**index.wxss**/
 2 | .frame_view{
 3 |   bottom: 160rpx;
 4 |   left: 60rpx;
 5 |   right: 60rpx;
 6 |   width:590rpx;
 7 |   height:590rpx;
 8 |   padding: 20rpx;
 9 |   background: #792db3;
10 |   z-index: 3;
11 |   display: flex;
12 |   flex-direction: column;
13 |   justify-content: space-between;
14 |   align-items: center;
15 |   border-radius: 30rpx;
16 | }
17 | .frame_row{
18 |   width:580rpx;
19 |   height:180rpx;
20 |   display: flex;
21 |   flex-direction: row;
22 |   justify-content: space-between;
23 |   align-items: center;
24 | } 
25 | .frame_item{
26 |   width:180rpx;
27 |   height:180rpx;
28 | }


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"description": "项目配置文件",
 3 | 	"packOptions": {
 4 | 		"ignore": []
 5 | 	},
 6 | 	"setting": {
 7 | 		"urlCheck": true,
 8 | 		"es6": true,
 9 | 		"postcss": true,
10 | 		"minified": true,
11 | 		"newFeature": true
12 | 	},
13 | 	"compileType": "miniprogram",
14 | 	"libVersion": "2.3.0",
15 | 	"appid": "wxd8b677fdfb0c79e7",
16 | 	"projectname": "%E5%A4%A7%E8%BD%AC%E7%9B%98",
17 | 	"debugOptions": {
18 | 		"hidedInDevtools": []
19 | 	},
20 | 	"isGameTourist": false,
21 | 	"condition": {
22 | 		"search": {
23 | 			"current": -1,
24 | 			"list": []
25 | 		},
26 | 		"conversation": {
27 | 			"current": -1,
28 | 			"list": []
29 | 		},
30 | 		"game": {
31 | 			"currentL": -1,
32 | 			"list": []
33 | 		},
34 | 		"miniprogram": {
35 | 			"current": -1,
36 | 			"list": []
37 | 		}
38 | 	}
39 | }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | //app.js
 2 | App({
 3 |   onLaunch: function () {
 4 |     // 展示本地存储能力
 5 |     var logs = wx.getStorageSync('logs') || []
 6 |     logs.unshift(Date.now())
 7 |     wx.setStorageSync('logs', logs)
 8 | 
 9 |     // 登录
10 |     wx.login({
11 |       success: res => {
12 |         // 发送 res.code 到后台换取 openId, sessionKey, unionId
13 |       }
14 |     })
15 |     // 获取用户信息
16 |     wx.getSetting({
17 |       success: res => {
18 |         if (res.authSetting['scope.userInfo']) {
19 |           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
20 |           wx.getUserInfo({
21 |             success: res => {
22 |               // 可以将 res 发送给后台解码出 unionId
23 |               this.globalData.userInfo = res.userInfo
24 | 
25 |               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
26 |               // 所以此处加入 callback 以防止这种情况
27 |               if (this.userInfoReadyCallback) {
28 |                 this.userInfoReadyCallback(res)
29 |               }
30 |             }
31 |           })
32 |         }
33 |       }
34 |     })
35 |   },
36 |   globalData: {
37 |     userInfo: null
38 |   }
39 | })


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <!--index.wxml-->
 2 | <view class="container">
 3 |   停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input>
 4 |   <view class='frame_view'>
 5 | <view class='frame_row'>
 6 | <image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
 7 | <image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
 8 | <image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
 9 | </view>
10 | 
11 | <view class='frame_row'>
12 | <image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
13 | <image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
14 | <image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
15 | </view>
16 | 
17 | <view class='frame_row'>
18 | <image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
19 | <image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
20 | <image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
21 | </view>
22 | </view>
23 | </view>
24 | 


--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
  1 | //index.js
  2 | //获取应用实例
  3 | const app = getApp()
  4 | 
  5 | //计数器
  6 | var interval = null;
  7 | 
  8 | //值越大旋转时间越长  即旋转速度
  9 | var intime = 50;
 10 | 
 11 | Page({
 12 |   data: {
 13 |     color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
 14 |     //9张奖品图片
 15 |     images: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'],
 16 |     btnconfirm: '/images/dianjichoujiang.png',
 17 |     clickLuck:'clickLuck',
 18 |     luckPosition:0,
 19 |   },
 20 | 
 21 |   onLoad:function(){
 22 |     this.loadAnimation();
 23 |   },
 24 | 
 25 |   input:function(e){
 26 |     var data = e.detail.value;
 27 |       this.setData({
 28 |         luckPosition: data
 29 |       })
 30 |   },
 31 | 
 32 | 
 33 |   //点击抽奖按钮
 34 |   clickLuck:function(){
 35 | 
 36 |     var e = this;
 37 | 
 38 |     //判断中奖位置格式
 39 |     if (e.data.luckPosition == null || isNaN(e.data.luckPosition) || e.data.luckPosition>7){
 40 |       wx.showModal({
 41 |         title: '提示',
 42 |         content: '请填写正确数值',
 43 |         showCancel:false,
 44 |       })
 45 |       return;
 46 |     }
 47 | 
 48 |     
 49 | 
 50 |     //设置按钮不可点击
 51 |     e.setData({
 52 |       btnconfirm:'/images/dianjichoujiangd.png',
 53 |       clickLuck:'',
 54 |     })
 55 |     //清空计时器
 56 |     clearInterval(interval);
 57 |     var index = 0;
 58 |     console.log(e.data.color[0]);
 59 |     //循环设置每一项的透明度
 60 |     interval = setInterval(function () {
 61 |       if (index > 7) {
 62 |         index = 0;
 63 |         e.data.color[7] = 0.5
 64 |       } else if (index != 0) {
 65 |         e.data.color[index - 1] = 0.5
 66 |       }
 67 |       e.data.color[index] = 1
 68 |       e.setData({
 69 |         color: e.data.color,
 70 |       })
 71 |       index++;
 72 |     }, intime);
 73 | 
 74 |     //模拟网络请求时间  设为两秒
 75 |     var stoptime = 2000;
 76 |     setTimeout(function () {
 77 |       e.stop(e.data.luckPosition);
 78 |     }, stoptime)
 79 | 
 80 |   },
 81 | 
 82 |   //也可以写成点击按钮停止抽奖
 83 |   // clickStop:function(){
 84 |   //   var stoptime = 2000;
 85 |   //   setTimeout(function () {
 86 |   //     e.stop(1);
 87 |   //   }, stoptime)
 88 |   // },
 89 | 
 90 |   stop: function (which){
 91 |     var e = this;
 92 |     //清空计数器
 93 |     clearInterval(interval);
 94 |     //初始化当前位置
 95 |     var current = -1;
 96 |     var color = e.data.color;
 97 |     for (var i = 0; i < color.length; i++) {
 98 |       if (color[i] == 1) {
 99 |         current = i;
100 |       }
101 |     }
102 |     //下标从1开始
103 |     var index = current + 1;
104 | 
105 |     e.stopLuck(which, index, intime, 10);
106 |   },
107 | 
108 | 
109 | /**
110 |  * which:中奖位置
111 |  * index:当前位置
112 |  * time：时间标记
113 |  * splittime：每次增加的时间 值越大减速越快
114 |  */
115 |   stopLuck: function (which, index,time,splittime){
116 |     var e = this;
117 |     //值越大出现中奖结果后减速时间越长
118 |     var color = e.data.color;
119 |     setTimeout(function () {
120 |       //重置前一个位置
121 |       if (index > 7) {
122 |         index = 0;
123 |         color[7] = 0.5
124 |       } else if (index != 0) {
125 |         color[index - 1] = 0.5
126 |       }
127 |       //当前位置为选中状态
128 |       color[index] = 1
129 |       e.setData({
130 |         color: color,
131 |       })
132 |           //如果旋转时间过短或者当前位置不等于中奖位置则递归执行
133 |           //直到旋转至中奖位置
134 |         if (time < 400 || index != which){
135 |           //越来越慢
136 |           splittime++;
137 |           time += splittime;
138 |           //当前位置+1
139 |           index++;
140 |           e.stopLuck(which, index, time, splittime);
141 |         }else{
142 |         //1秒后显示弹窗
143 |           setTimeout(function () {
144 |         if (which == 1 || which == 3 || which == 5 || which == 7) {
145 |             //中奖
146 |             wx.showModal({
147 |               title: '提示',
148 |               content: '恭喜中奖',
149 |               showCancel: false,
150 |               success: function (res) {
151 |                 if (res.confirm) {
152 |                   //设置按钮可以点击
153 |                   e.setData({
154 |                     btnconfirm: '/images/dianjichoujiang.png',
155 |                     clickLuck: 'clickLuck',
156 |                   })
157 |                   e.loadAnimation();
158 |                 }
159 |               }
160 |             })
161 |           } else {
162 |             //中奖
163 |             wx.showModal({
164 |              title: '提示',
165 |               content: '很遗憾未中奖',
166 |               showCancel: false,
167 |               success:function(res){
168 |                 if(res.confirm){
169 |                   //设置按钮可以点击
170 |                   e.setData({
171 |                     btnconfirm: '/images/dianjichoujiang.png',
172 |                     clickLuck: 'clickLuck',
173 |                   })
174 |                   e.loadAnimation();
175 |                 }
176 |               }
177 |             })
178 |           }
179 |           }, 1000);
180 |         }
181 |     }, time);
182 |     console.log(time);
183 |   },
184 |   //进入页面时缓慢切换
185 |  loadAnimation:function (){
186 |   var e = this;
187 |   var index = 0;
188 |   // if (interval == null){
189 |   interval = setInterval(function () {
190 |     if (index > 7) {
191 |       index = 0;
192 |       e.data.color[7] = 0.5
193 |     } else if (index != 0) {
194 |       e.data.color[index - 1] = 0.5
195 |     }
196 |     e.data.color[index] = 1
197 |     e.setData({
198 |       color: e.data.color,
199 |     })
200 |     index++;
201 |   }, 1000);
202 |   // }  
203 | }
204 | })
205 | 


--------------------------------------------------------------------------------