简易的jQuery九宫格抽奖代码

来源:https://www.sucaihuo.com/js/4899.html 2019-11-02 11:53浏览(366) 收藏

一款简易的jQuery九宫格抽奖代码,样式比较粗糙,可自行进一步美化。注:加载外部json数据文件,本地预览会有跨域问题,请在服务端查看演示效果。
简易的jQuery九宫格抽奖代码
分类:抽奖 > 九宫格 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="encryption-win.js"></script>
<script>
    $(function () {

        document.querySelector('#me').addEventListener('click', function () {
            $.ajax({
                url: './winData.json',
                method: 'get',
                success: function (data) {
                    new Win({
                        el: '.lottery', //抽奖元素的父级
                        startIndex: 1, //从第几个位置开始抽奖 [默认为零]
                        totalCount: 4, //一共要转的圈数
                        // winningIndex: data.win, //中奖的位置索引[1-8] 后台返回的中奖数字
                        winningIndex: 3, //模拟写死的,实际效果可接受后台返回
                        speed: 50 //抽奖动画的速度 [数字越大越慢,默认100]
                    }, function () {  //中奖后的回调函数
                        //do something
                        $('.lottery li').each(function () {
                            if ($(this).hasClass('active')) {
                                //打印当前中奖信息
                                console.log($(this).html());
                                $('.prize').html($(this).html());
                            }
                        });
                    });
                }
            });
        })
    });//end function
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2