先看效果：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>转盘抽奖二</title>

    <style>

        *{margin:0;padding: 0;}

        #lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}

        #lottery table{background-color:yellow;}

        #lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}

        #lottery table td img{display:block;width:190px;height:170px;}

        #lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url('./img/lottery1.jpg') no-repeat top center;}

        #lottery table td a:hover{background-image:url('./img/lottery2.jpg');}

        #lottery table td.active .mask{display:block;}

        .mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }

    </style>

</head>

<body>

<div id="lottery">

    <table border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td class="lottery-unit lottery-unit-0"><img src="./img/gift0.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-1"><img src="./img/gift1.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-2"><img src="./img/gift2.jpg"><div class="mask"></div></td>

        </tr>

        <tr>

            <td class="lottery-unit lottery-unit-7"><img src="./img/gift7.jpg"><div class="mask"></div></td>

            <td><a href="#"></a></td>

            <td class="lottery-unit lottery-unit-3"><img src="./img/gift3.jpg"><div class="mask"></div></td>

        </tr>

        <tr>

            <td class="lottery-unit lottery-unit-6"><img src="./img/gift6.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-5"><img src="./img/gift5.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-4"><img src="./img/gift4.jpg"><div class="mask"></div></td>

        </tr>

    </table>

</div>

<script src="../js/jquery.1.10.0.js"></script>

<script>

    $(function () {

        var lottery = {

            index: -1,    //当前转动到哪个位置，起点位置

            count: 0,    //总共有多少个位置

            timer: 0,    //setTimeout的ID，用clearTimeout清除

            speed: 20,    //初始转动速度

            times: 0,    //转动次数

            cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节

            prize: -1,    //中奖位置

            init: function (id) { //对象的入口方法

                //节点检测

                if ($("#" + id).find(".lottery-unit").length > 0) {

                    $lottery = $("#" + id); //抽奖转盘节点ID

                    $units = $lottery.find(".lottery-unit"); //奖品节点

                    this.obj = $lottery;  //把抽奖转盘节点对象赋值给lottery对象的obj属性

                    this.count = $units.length; //把奖品节点的长度赋值给lottery的count属性

                    $lottery.find(".lottery-unit-" + this.index).addClass("active");    //给转盘当前位置添加当前状态

                };

            },

            roll: function () { //转盘转动的方法

                var index = this.index; //当前转动到的位置

                var count = this.count; //位置总数

                var lottery = this.obj; //抽奖转盘的节点

                $(lottery).find(".lottery-unit-" + index).removeClass("active"); //每次转动前，先把当前的选择状态删除

                index += 1; //将转动到的位置增加1

                if (index > count - 1) {    //判断如果当前转动到的位置大于奖品节点总长度-1，则让当前转动到的位置重置为0;

                    index = 0;

                };

                $(lottery).find(".lottery-unit-" + index).addClass("active");   //然后给当前转动到的位置添加当前状态

                this.index = index; //把当前转动到的位置赋值给lottery对象的index属性

                return false; //返回false,终止程序

            },

            stop: function (index) {    //停止转动，返回中奖位置

                this.prize = index;

                return false;   //返回false,终止程序

            }

        };

        //定义一个转动的方法roll()

        function roll() {

            lottery.times += 1; //调用lottery对象的times属性并且在每次调用时加1

            lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化

            //判断，如果转动次数大于转动基本次数加10（转动多少次后进入抽奖）并且中奖位置等于当前转动的位置的时候

            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {

                clearTimeout(lottery.timer); //清除转动的定时器

                lottery.prize = -1; //重置prize属性为-1

                lottery.times = 0;  //重置转动次数times为0

                click = false;  //重置变量click为false;ps:click变量用来在点击抽奖后不能在点击抽奖按钮，防止造成定时器叠加

            } else {

                //否则，即转动次数times<=转动基本次数时并且中奖位置和当前转动位置不相等的时候

                //判断如果转动次数小于转动基本数的时候

                if (lottery.times < lottery.cycle) {

                    //让转动速度减少10并重新赋值给属性speed

                    lottery.speed -= 10;

                    //否则如果，转动次数等于转动基本数的时候

                } else if (lottery.times == lottery.cycle) {

                    //转动基本数等于转动次数后产生抽奖结果

                    //通过一个随机数生成，把随机数赋值给新声明的变量index

                    var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成

                    lottery.prize = index; //把中间物品赋值给lottery对象的prize属性

                } else {

                    //否则即转动次数大于转动基本数的时候

                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {

                        lottery.speed += 110;

                    } else {

                        lottery.speed += 20;

                    }

                }

                if (lottery.speed < 40) {

                    lottery.speed = 40;

                };

                lottery.timer = setTimeout(roll, lottery.speed);//循环调用

            };

            return false;

        };

        //方法调用

        var click = false;

        lottery.init('lottery');

        $("#lottery a").click(function () {

            if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应

                return false;

            } else {

                lottery.speed = 100;

                roll();    //转圈过程不响应click事件，会将click置为false

                click = true; //一次抽奖完成后，设置click为true，可继续抽奖

                return false;

            };

        });

    });

</script>

</body>

</html>

jquery转盘抽奖的研究的更多相关文章

  1. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  2. 用jQuery和PHP来实现转盘抽奖程序

    准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...

  3. jquery实现转盘抽奖

    jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

  4. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

  5. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  6. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  7. jquery实现抽奖

    用jquery实现抽奖小程序   用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...

  8. css3转盘抽奖

    做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...

  9. jquery实现抽奖小游戏

    在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...

随机推荐

  1. 电子器件行业ERP实施案例

    XX有限公司是一家致力于能源需求侧管理,为工业,建筑,交通等终端能耗领域提供系统高效的能源管理解决方案的中港合资企业,作为最早从事电力计量与采集的省级高新技术企业,自2001年成立以来,专注于用户侧智 ...

  2. TypeScript设计模式之工厂

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  3. Struts2中Action配置的三种方式

    <!-- 方案一:一个action对应一个方法; --> <action name="add" class="com.gxxy.struts.kp03_ ...

  4. 需要接入的SDK包，一定要用最新版，否则后果很严重

    ios8更新后,原来的静态库不支持.导致一个bug连续测试好多天都没结果.

  5. CDIF: 基于JSON的SOA软件框架

    通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...

  6. wemall doraemon中Android app商城系统向指定URL发送GET方法的请求代码

    URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...

  7. Codevs2776 寻找代表元

    2776 寻找代表元 时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold    题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号 ...

  8. UI 自定义视图 ,视图管理器

    一>自定义label - textField 视图 自定义视图:系统标准UI之外,自己组合而出的新的视图 iOS 提供了很多UI组件 ,借助它们,我们可以做各种程序 尽管如此,实际开发中,我们还 ...

  9. 九度OJ题目1443：Tr A (JAVA)

    题目描述: A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. 输入: 数据的第一行是一个T,表示有T组数据. 每组数据的第一行有n(2 <= n & ...

  10. Visual Studio 2017正式版安装

    Visual Studio号称宇宙第一IDE, 2017年3月7日强大的微软帝国时隔两年多终于发布新一代IDE Visual Studio 2017.支持的功能简直不能太多,详情移步:https:// ...