来、来、来自己写——九宫格转盘_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 来、来、来自己写——九宫格转盘

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

 2015/5/7 3:14:32  一文不提  程序员俱乐部  我要评论(0)
  • 摘要:五一告急,4月29日接到小任务,放假前做个九宫格转盘小页面,噢~~设计稿已出,当前时间下午两点,正在改bug,主流项目30日得上线,九宫格30日中午得上线。时间略紧下午6点改完bug,加班搞九宫格。一个页面,三屏内容,九宫格、结果弹窗和分享提示。计划:晚上写静态页面明早写js晚上搞定了静态界面,如下:html、css方面,宽度用320px(主要用于移动端),主体内容绝对定位,我觉得目前的写法还是不错,这里就不贴代码了,结尾我会附上页面链接,如果有好的建议,希望得到大神的指点。JS方面
  • 标签:自己

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

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

 

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

计划:

  • 晚上写静态页面
  • 明早写js

晚上搞定了静态界面,如下:

 

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

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

 

 

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

大致思路如下:

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

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

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

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

为方便理解,我先直接提代码:

$(document).on('click', '[data-action]', function(e){
    var $this = $(this),
        action = $this.data('action');
    switch(action){
        case 'start':
            var speed = Math.floor(Math.random()*150) + 200;//350-200的范围
            goScroll(0,  speed, 0.8);
            break;
    }
});

function goScroll(i, speed, mul){
    if(speed < 30) mul = 1.1;
    if(i==8)  i = 0;
    turnDom[i].addClass('active');
    if(speed > 350) {//结束
        turnDom[i].addClass('active');
        scrolling = false;
        openResult(i);
        return;
    }
    setTimeout(function(){
                    turnDom[i].removeClass('active');
                    i++;
                    speed = speed * mul;
                    goScroll(i, speed, mul);
              },speed);
}

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

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

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

 

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

还是直接贴代码:

var scrolling = false;//是否在转
var who;
function setWho(){
    who = Math.floor(Math.random()*9);
    if(who == 8) who = 0;
}

$(document).on('click', '[data-action]', function(e){
    var $this = $(this),
        action = $this.data('action');
    switch(action){
        case 'start':
            if(scrolling==true) return;
            setWho();
            var speed = Math.floor(Math.random()*150) + 200;//350-200的范围
            scrolling = true;
            goScroll(0,  speed, 0.8);
            break;
    }
});

function goScroll(i, speed, mul){
    if(speed < 30) mul = 1.1;
    if(i==8)  i = 0;
    turnDom[i].addClass('active');
    if(speed > 350 && who==i) {//结束
        turnDom[i].addClass('active');
        scrolling = false;
        openResult(i);
        return;
    }
    setTimeout(function(){
                    turnDom[i].removeClass('active');
                    i++;
                    speed = speed * mul;
                    goScroll(i, speed, mul);
              },speed);
}

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

 

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

 

发表评论
用户名: 匿名