【来、来、来自己写——九宫格转盘】

五一告急，4月29日接到小任务，放假前做个九宫格转盘小页面，噢~~设计稿已出，当前时间下午两点，

正在改 bug ，主流项目30日得上线，九宫格30日中午得上线。时间略紧下午6点改完bug，加班搞九宫格。



一个页面，三屏内容，九宫格、结果弹窗和分享提示。

计划：

晚上写静态页面
明早写 js
晚上搞定了静态界面，如下：   
 

 

html、css方面，宽度用320px（主要用于移动端），主体内容绝对定位，我觉得目前的写法还是不错，

这里就不贴代码了，结尾我会附上页面链接，如果有好的建议，希望得到大神的指点。

JS方面，因为不想到网上去下载别人的代码，也没时间去研究别人的好的实现方式，就自己随便写了个。

大致思路如下：

1.先实现匀速转动：把执行顺序存入数组，setTimeout重复调用，改变当前active位置（这里的命名有点坑请忽略）：

1. var turnOrder = ['bg-3','bg-6','bg-9','bg-8','bg-7','bg-4','bg-1','bg-2'];
   
2. var turnDom = [];
   
3. for(var i = 0;i < turnOrder.length; i++){
   
4.     turnDom.push($('.'+turnOrder[i]));
   
5. }
   
6. function goScroll(i){if(i==8)  i = 0;
   
7.     turnDom[i].addClass('active');
   
8.     setTimeout(function(){
   
9.                     turnDom[i].removeClass('active');
   
10.                     i++;
    
11.                     goScroll(i);
    
12.               },500);
    
13. }

复制代码

2.实现先加速、再减速、最后得出结果。

加速和减速需要用setTImeout的延迟控制，加速或者减速需要用延迟范围来判断。

为方便理解，我先直接提代码：

1. $(document).on('click', '[data-action]', function(e){
   
2.     var $this = $(this),
   
3.         action = $this.data('action');
   
4.     switch(action){
   
5.         case 'start':
   
6.             var speed = Math.floor(Math.random()*150) + 200;//350-200的范围
   
7.             goScroll(0,  speed, 0.8);
   
8.             break;
   
9.     }
   
10. });
    
11. 
    
12. function goScroll(i, speed, mul){
    
13.     if(speed < 30) mul = 1.1;
    
14.     if(i==8)  i = 0;
    
15.     turnDom[i].addClass('active');
    
16.     if(speed > 350) {//结束
    
17.         turnDom[i].addClass('active');
    
18.         scrolling = false;
    
19.         openResult(i);
    
20.         return;
    
21.     }
    
22.     setTimeout(function(){
    
23.                     turnDom[i].removeClass('active');
    
24.                     i++;
    
25.                     speed = speed * mul;
    
26.                     goScroll(i, speed, mul);
    
27.               },speed);
    
28. }

复制代码

向自调函数goScroll传入速度和乘数，speed随机范围我设置为350-200毫秒，初始乘数是0.8，每次自调用speed和mul相乘，

这样速度就慢慢变快了，当速度小于30毫秒，乘数为1.1，速度慢慢就变慢了，当速度大于350时，停止并公布结果。这里的结果速度

一定要大于初始的随机速度，否则会出现直接输出结果。

到目前为止还不完善，现在每一种的结果随机几率并不平均，开始转动后、也没有阻止转动按钮。

还是直接贴代码：

1. var scrolling = false;//是否在转
   
2. var who;
   
3. function setWho(){
   
4.     who = Math.floor(Math.random()*9);
   
5.     if(who == 8) who = 0;
   
6. }
   
7. 
   
8. $(document).on('click', '[data-action]', function(e){
   
9.     var $this = $(this),
   
10.         action = $this.data('action');
    
11.     switch(action){
    
12.         case 'start':
    
13.             if(scrolling==true) return;
    
14.             setWho();
    
15.             var speed = Math.floor(Math.random()*150) + 200;//350-200的范围
    
16.             scrolling = true;
    
17.             goScroll(0,  speed, 0.8);
    
18.             break;
    
19.     }
    
20. });
    
21. 
    
22. function goScroll(i, speed, mul){
    
23.     if(speed < 30) mul = 1.1;
    
24.     if(i==8)  i = 0;
    
25.     turnDom[i].addClass('active');
    
26.     if(speed > 350 && who==i) {//结束
    
27.         turnDom[i].addClass('active');
    
28.         scrolling = false;
    
29.         openResult(i);
    
30.         return;
    
31.     }
    
32.     setTimeout(function(){
    
33.                     turnDom[i].removeClass('active');
    
34.                     i++;
    
35.                     speed = speed * mul;
    
36.                     goScroll(i, speed, mul);
    
37.               },speed);
    
38. }

复制代码

setWho用来确定结果（这里给自己公司的软件的概率+1，也就是九分之二的概率，不过分撒 O(∩_∩)O ...），isScrolling，确定是否正在转动。

嗯，大致比较重要的逻辑就是这些了。当然还有部分都没贴出来，如果需要，可以到实际项目里去看，那么来看看效果吧！》点这里《