这是一个转盘抽奖

1. 写在前面

在一些公司的运营活动中，经常会出现的一个活动类型就是抽奖，而抽奖的活动中，有一种比较常见的抽奖类型就是：转盘抽奖。在前端转盘抽奖中，为了能兼容IE的各个版本，都是使用的flash的插件，来做的转盘抽奖，而在本篇中，将给出一个转盘的抽奖插件，只适用于H5的项目中，或者是说，支持CSS3的浏览器中。

2. 先来看DEMO

像这种插件，首先还是来看看示例吧：

看了示例之后，如果有兴趣，那么可以继续向后看，如果没有兴趣，那么也可以去其他地方逛逛吧，时间宝贵，要记得节省哦。

3. 使用方法

该插件命名为：Turntable。

初始化方法如下：


var turntable = new Turntable(options);

其中，options是一个配置参数，接下来，就来看看options支持的一些属性和方法：

3.1 options.ele{jQuery}

必须

转盘的旋转指针对应的元素。

3.2 options.gifts{Object}

必选

各奖品对应的位置，以及各奖品的中心点以及范围，这个说起来太过模糊，我们依据前面的示例，来看看各属性的值：


options.gifts = {
    "1":{
        id : "1",
        name : "理财金2000元",
        angleCenter : 0,
        angleRange : 30,
        tips : "恭喜您获得理财金2000元~~"
    },
    "2":{
        id : "2",
        name : "理财金1000元",
        angleCenter : 60,
        angleRange : 30,
        tips : "恭喜您获得理财金1000元~~"
    },
    "3":{
        id : "3",
        name : "谢谢参与",
        angleCenter : 120,
        angleRange : 30,
        tips : "很遗憾没有能中奖，再试一次吧~"
    },
    "4":{
        id : "4",
        name : "京东E卡",
        angleCenter : 180,
        angleRange : 30,
        tips : "恭喜您抽中京东E卡一张~"
    },
    "5":{
        id : "5",
        name : "理财金5200元",
        angleCenter : 240,
        angleRange : 30,
        tips : "恭喜您获得理财金5200元~~"
    },
    "6":{
        id : "6",
        name : "谢谢参与",
        angleCenter : 300,
        angleRange : 30,
        tips : "很遗憾没有能中奖，再试一次吧~"
    }
};

拿上面的这个数据结构体，可以和最前面的示例，进行对比，那么接下来，我们来看看，每结构体中的，各个属性，都代表的什么含义；


"1":{
    id : "1",
    // 奖品对应的id值，这里的值要与该对象的key值相同。

    name : "理财金2000元",
    // 奖品的显示名称，这个属性在插件中，不会被使用到。

    angleCenter : 0,
    // 该奖品在转盘上中心点所对应的角度坐标，最大360

    angleRange : 30,
    // 该奖品在转盘上的范围，其范围就是，[0-30,0+30]

    tips : "恭喜您获得理财金2000元~~"
    // 当中了该奖品之后，进行的提示信息
}

其中，tips属性，不会在插件中使用到，我在上面的示例中，定义该属性是为了能在callback属性中使用。

至于在callback如何使用，就看下面callback中的使用方式吧。

3.5 options.callback{Function}

必须，如果不定义这个方法，那么当转盘停止时，是没有任何反应的。

看一个简单的示例，options.callback可以如下的方式定义：



//传入两个参数，
//giftId，停止的目标奖品Id，可以通过options.gifts[giftId]查看，中奖的是什么
//json，是一个额外的数据，这个可以自定义，比如是ajax返回的json数据等。

options.callback = function (giftId,json){
    var gife = options.gifts[giftId];

    // 做一个简单的弹窗提示
    alert(gift.tips);
}

这里的callback，最主要的数据还是json数据，比如ajax返回的数据，那么giftId，也是包含在json内部的，至于这个json数据是什么样子的，那就可以看具体的业务了，所以，不管这个转盘的处理是如何处理的，只要你在这个callback中，做自定义的处理即可。

3.4 options.startAngle{Number}

可选

转盘的初始角度，默认角度为0，就是指针指向时钟的12点的角度，如果要修改这个属性的话，那么ele元素的指针，最好也有个默认的旋转角度，与该属性值相同。

建议不要修改该属性，默认值就好了。

3.5 options.speed{Number}

可选

指针旋转的速度，数值越大，那么旋转速度就越大，默认旋转速度为10；

3.6 结束

到这里，初始化Turntable相关的信息，就结束了。

第一次实战演练：DEMO求临幸

Mobile端，可以直接扫码查看：二维码

4. 实例化之后

前面，我们把Turntable进行了实例化，实例化之后的操作，同样是很重要的，转盘的开始与结束，都是通过这个实例进行说明的。

比如，我们如下的进行了初始化，这里的实例化的参数，都是按照前面示例中的参数来的，具体可以查看前面的示例中的源代码。


var btn = $("#pointer"),
    turntable = null,
    options = {
        ele : btn,
        speed : 15,
    };

// 奖品的角度列表
options.gifts = {
    "1":{
        id : "1",
        name : "理财金2000元",
        angleCenter : 0,
        angleRange : 30,
        tips : "恭喜您获得理财金2000元~~"
    },
    "2":{
        id : "2",
        name : "理财金1000元",
        angleCenter : 60,
        angleRange : 30,
        tips : "恭喜您获得理财金1000元~~"
    },
    "3":{
        id : "3",
        name : "谢谢参与",
        angleCenter : 120,
        angleRange : 30,
        tips : "很遗憾没有能中奖，再试一次吧~"
    },
    "4":{
        id : "4",
        name : "京东E卡",
        angleCenter : 180,
        angleRange : 30,
        tips : "恭喜您抽中京东E卡一张~"
    },
    "5":{
        id : "5",
        name : "理财金5200元",
        angleCenter : 240,
        angleRange : 30,
        tips : "恭喜您获得理财金5200元~~"
    },
    "6":{
        id : "6",
        name : "谢谢参与",
        angleCenter : 300,
        angleRange : 30,
        tips : "很遗憾没有能中奖，再试一次吧~"
    }
};

options.callback = function(id,json){
    var gift = options.gifts[id];

    if(gift){
        alert(gift.tips);
    }else{
        alert("网络异常，请稍后再试~~");
    }
};

turntable = new Turntable(options);

在接下来的，我们就假设Turntable的实例化对象是turntable，接下来就看看，转盘有哪些可以供我们使用的属性和方法吧，这里可以用的实例方法，其实是很少的，就三个：

4.1 turntable.begin

开始转盘，直接调用:


turntable.begin();

这个没什么可说的，用来让转盘转起来的。

4.2 turntable.stop

停止转盘。转盘的停止，是不可以直接就停止的，所以这里的转盘停止，是需要一段时间的，所以才有了前面的callback的设置，stop方法的调用与callback是相同的，如下我们来看一看示例：


turntable.stop(giftId,json);

stop方法传入两个参数，与options.callback方法中，传入的参数完全相同。

其中：

1：giftId，是表示转盘最后要停止的奖品所对应的id，这个id必须是options.gifts中所包含的。

2：json就是一个自定义的数据了，这里传入什么，在callback中，就会传入这个数据，所以就看具体的业务了。

4.3 turntable.isStoped

当前转盘的状态，返回值为true/false，表示转盘是否已经停止了。


var isStop = turntable.isStoped();
// true / false

因为转盘不像其他的插件，当转盘尚未停止时，是不能有其他的操作的，所以，这里给出这个方法，用来判断当前转盘的状态。

5. 结尾

这只是一个插件，拿来分享一下吧，供需要的朋友使用，尤其是在时间比较赶的项目中。

如果您发现文中有描述错误或者不当的地方，请留言指出，不胜感激，谢谢！

本文属于原创文章，如需转载，请注明出处，谢谢！

本文地址：http://www.zhangyunling.com/?p=745

发表评论取消回复