这是一个转盘抽奖

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

这是一个转盘抽奖》有5个想法

  1. mithen说道:

    示例有个问题,需要请教博主, options.startAngle 似乎不生效,我有个需求是 :只有奖品在转,指针在 320deg,奖品分十分,不管如何设定 options.startAngle 奖品却始终转不到指针的位置,始终差了40deg 左右。
    跪求楼主回复

    1. 之前的这个方法,写的不好,后来有过改进,只是一直没有更新上来,刚才又写了个demo,你可以直接试试:http://www.zhangyunling.com/study/2019/20190314/

  2. 感谢博主的文章分享,条理清晰,受教了!

  3. 说道:

    经常看污妖王张鑫旭的文章。意外的看到你的!!!然后发现你俩都在阅文集团,然后还是同事。感觉这个圈好小

    1. 我也是经常看他的文章的,然后现在可以跟着他学习了,有机会来阅文啊,欢迎欢迎