jquery+css3抽奖大转盘插件

大转盘由原生js实现

里面已经写好概率算法 

下面附带一下简答你的代码 :  

转盘旋转结构 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<ul id="wheel" class="wheel-list">
    <li style="transform: rotate(0deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                一等奖
            h3>
            <p>
                iPhone6 plus
            p>
        div>
    li>
    <li style="transform: rotate(60deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                再接再厉
            h3>
            <p>
                呜呜 没有中奖 ...
            p>
        div>
    li>
    <li style="transform: rotate(120deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                鼓励奖
            h3>
            <p>
                差一点啊
            p>
        div>
    li>
    <li style="transform: rotate(180deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                四等奖
            h3>
            <p>
                特级红富士一个
            p>
        div>
    li>
    <li style="transform: rotate(240deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                三等奖
            h3>
            <p>
                iPad mini retina
            p>
        div>
    li>
    <li style="transform: rotate(300deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        i>
        <div class="prize">
            <h3>
                二等奖
            h3>
            <p>
                iPad Air2
            p>
        div>
    li>
ul>

算法js : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//开始 function  ran = 随机 
function operation(ran) {
    lenCloc++;
    var Prize = turntable[ran] - 1,
    sun = turn * 360; //编号  // 度数  //  时间
    if (Prize >= totalNum) {
        Prize = 0;
    }
    var soBuom = parseInt(Math.floor(Math.random() * 60) - 30);
        //避免多次出现1等奖 所以要删除 下标 
    turntable.splice(ran, 1);
    //旋转度数 = 上次度数+ 最小圈数 * 360 + 当前数字 * 60 +随机角度  = 最终旋转度数
    wheel.style.transform = "rotate(" + ((lenCloc * sun + Prize * 60) + soBuom) + "deg)";
    //wheel.style.webkitTransform = "rotate("+((lenCloc*sun+Prize*60)+soBuom)+"deg)";
    setTimeout(function() {
        alert("您获得了奖品编号:" + PrizeSon[Prize]);
        isStatr = false;
    },
    3200);
}

简单参数:

1
2
3
4
5
6
var totalNum = 6 ; // 转盘 总数
var trunNum = [ 1 , 2 , 3 , 4 , 5 , 6 ]; //概率奖品 编号
var turntable = [] ; // 随机概率计算
var isStatr = false //锁 专拍没有执行完的时候 不可以再次点击 ;
var lenCloc = 0 ; //当前第几次计算叠加的度数
var turn  = 3 ; //转盘旋转最低的圈数


      立即下载
     标签 红包   抽奖   金币  
    相关评论(0)
    您是不是忘了说点什么?

    友情提示:垃圾评论一律封号...

    还没有评论,快来抢沙发吧!