美文网首页让前端飞
【one week one project】大转盘转啊转

【one week one project】大转盘转啊转

作者: 姚冰coding | 来源:发表于2017-05-23 20:20 被阅读0次

【one week one project】大转盘转啊转

访问地址:大转盘
GitHub:Github

项目背景:

活动抽奖,奖品数目固定,参与人数不定的场合。比如:一等奖30人,二等奖50人,三等奖100人。

抽奖算法

生成固定长度的数组,下标0-29为一等奖,30-79为二等奖,80-179为三等奖。
随机抽取一个数组内元素,然后删除此元素。

前端实现

  • jQuery
  • BootStrap
  • jQueryRotate

其他问题

  1. 因为是完全使用前端进行实现,也不需要后台参与,所以数据需要做本地存储,采用Local Storage.只能存储字符串,不能存储数组,对象!如果需要存储字符串、对象或者json需要进行先格式化为字符串,然后再取出
//取出数组
 if (localStorage.local) {
        str = localStorage.local;
        a = str.split(",");
        console.log("a=" + a);
    }

  1. 为方便使用,监听空格和ENTERkeydown事件
  $(document).keydown(function(event){
        
        if(event.keyCode==13 || event.keyCode==32){

                bb();
                rotate();
                wait();
                setTimeout('result(price)',6000)
        }
    });

bug

1.连续点按会照成一直转动,事件一直被触发的情况。
解:增加一层,事件开始时候,这一层出现,防止事件被继续触发,等到转圈结束,在隐藏

2.BootStrap布局会造成移动端的大面积空白
解:要不,我们试试flex布局?

相关文章

网友评论

    本文标题:【one week one project】大转盘转啊转

    本文链接:https://www.haomeiwen.com/subject/qrmgxxtx.html