jQuery实现带弹窗和次数的转盘抽奖(代码)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于jQuery实现带弹窗和次数的转盘抽奖(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

html:

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="g-content">

<div class="g-lottery-case">

    <div class="g-left">

        <h2>您已拥有<span class="playnum"></span>次抽奖机会,点击立刻抽奖!~</h2>

        <div class="g-lottery-box">

            <div class="g-lottery-img">

 

            </div>

            <a class="playbtn" href="javascript:;" title="开始抽奖"></a>

        </div>

    </div>

</div>

</div>

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

75

76

77

78

79

$(function() {

    var $btn = $('.playbtn');

    var $btn02 = $('.g-lottery-img');

    var $tan=$('#info');

    var playnum = 1; //初始次数,由后台传入

    $('.playnum').html(playnum);

    var isture = 0;

    var clickfunc = function() {

        var data = [1, 2, 3, 4, 5];

        //data为随机出来的结果,根据概率后的结果

        data = data[Math.floor(Math.random() * data.length)];

        switch(data) {

            case 1:

                rotateFunc(1, 36, '01');

                break;

            case 2:

                rotateFunc(2, 108, '02');

                break;

            case 3:

                rotateFunc(3, 180, '03');

                break;

            case 4:

                rotateFunc(4, 252, '04');

                break;

            case 5:

                rotateFunc(5, 324, '05');

                break;

 

        }

    }

    if(playnum>0)

    {

        $('.playbtn').addClass("playbtn02");

 

    }

 

    $btn.click(function() {

        if(isture) return; // 如果在执行就退出

        isture = true; // 标志为 在执行

        //先判断是否登录,未登录则执行下面的函数

        if(1 == 2) {

            $('.playnum').html('0');

            alert("请先登录");

            isture = false;

        } else { //登录了就执行下面

            if(playnum <= 0) { //当抽奖次数为0的时候执行

                alert("没有次数了");

 

                $('.playnum').html(0);

                isture = false;

            } else { //还有次数就执行

 

                playnum = playnum - 1; //执行转盘了则次数减1

                if(playnum <= 0) {

                    playnum = 0;

                }

                $('.playnum').html(playnum);

                clickfunc();

            }

        }

    });

    var rotateFunc = function(awards, angle, text) {

        isture = true;

        $btn.stopRotate();

        $btn02.rotate({

            angle: 0,

            duration: 4000, //旋转时间

            animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转

            callback: function() {

                isture = false; // 标志为 执行完毕

                $('#info'+text).show();

                if(playnum <= 0) { //当抽奖次数为0的时候执行

                    $('.playbtn').removeClass("playbtn02");

                }

 

            }

        });

    };

});

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!!!

以上就是jQuery实现带弹窗和次数的转盘抽奖(代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5表单验证的解析

javascript中的var和let的区别(代码示例)

javascript数组遍历的6种方法比较

export和export default中的知识点介绍(附示例)

html怎样将表单居中

HTML5设置视频背景的方法介绍

html strike标签怎么用

html标记中,表示网页标题的标记是什么

HTML5删除的标签有哪些

js实现加载时锁定html页面元素的方法

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...