jquery——九宫格大转盘抽奖实例


Posted in Javascript onJanuary 16, 2017

 一、用到的图片

jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例jquery——九宫格大转盘抽奖实例

二、代码如下,重点是js部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery九宫格大转盘抽奖</title>
<style>
#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(images/lottery1.jpg) no-repeat top center;}
#lottery table td a:hover{background-image:url(images/lottery2.jpg);}
#lottery table td.active .mask{display:block;}
.mask{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:url(images/mask.png) no-repeat;
  display:none;
}
</style>
</head>
<body class="keBody">
<!--效果html开始-->
<div id="lottery">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="lottery-unit lottery-unit-0"><img src="images/gift0.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-1"><img src="images/gift1.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-2"><img src="images/gift2.jpg"><div class="mask"></div></td>
    </tr>
    <tr>
      <td class="lottery-unit lottery-unit-7"><img src="images/gift7.jpg"><div class="mask"></div></td>
      <td><a href="#"></a></td>
      <td class="lottery-unit lottery-unit-3"><img src="images/gift3.jpg"><div class="mask"></div></td>
    </tr>
    <tr>
      <td class="lottery-unit lottery-unit-6"><img src="images/gift6.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-5"><img src="images/gift5.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-4"><img src="images/gift4.jpg"><div class="mask"></div></td>
    </tr>
  </table>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
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);
      $units = $lottery.find(".lottery-unit");
      this.obj = $lottery;
      this.count = $units.length;
      $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;
    if (index>count-1) {
      index = 0;
    };
    $(lottery).find(".lottery-unit-"+index).addClass("active");
    this.index=index;
    return false;
  },
  stop:function(index){
    this.prize=index;
    return false;
  }
};

function roll(){
  lottery.times += 1;
  lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
  if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
    clearTimeout(lottery.timer);
    lottery.prize=-1;
    lottery.times=0;
    click=false;
  }else{
    if (lottery.times<lottery.cycle) {
      lottery.speed -= 10;
    }else if(lottery.times==lottery.cycle) {
      var index = Math.random()*(lottery.count)|0;
      lottery.prize = index;    
    }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;
    };
    //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
    lottery.timer = setTimeout(roll,lottery.speed);//循环调用
  }
  return false;
}

var click=false;

window.onload=function(){
  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>
<!--效果html结束-->

</body>
</html>

效果如下:

jquery——九宫格大转盘抽奖实例

三、注意事项

1、抽奖过程说明

上面只是前端展示的效果。中奖物品通过一个随机数生成。

var index = Math.random()*(lottery.count)|0;

真正开发中中奖物品是通过向后端接口发送请求返回的。

$("#lottery a").click(function(){
       var islogin=checkLogin();
       if(islogin){//已登录用户才能去抽奖
         if (click) {
          return false;
        }else{
          //向后端接口发请求返回中奖结果
          var geturl="http://xxxxxx?username="+username+"&token="+token;
           $.ajax({
            url:geturl,
            type:"GET",
            dataType:"json",
           async:false,
          success:function(data){
              if(data.errorcode==0){
              var rewardid=data["message"]["rewardid"];
              var cardno=data["message"]["rewardCardNo"];
               var passno=data["message"]["rewardCardPass"];
               var prize=-1;
                var content="";
               if(rewardid=="iphone6"){
               lottery.prize=0;
               prize=0;
              content="一部iphone6手机";
              $("#content1").html(content);
                }else if(rewardid=="PPTVKING"){
                lottery.prize=1;
              prize=1;
               content="一部PPTV KING7s 3D影音手机";
               $("#content1").html(content);
                /*...  */
               }else if(rewardid=="legao"){
              lottery.prize=5;
              prize=5;
              content="一份乐高的玩具";
                $("#content1").html(content);
               }
              
              lottery.speed=100;
              roll();
              click=true;  
              return false;
             }else{
              /*错误处理*/
               if(data.errorcode==3){
              $("#novip").show();
               }else{
              $("#notime").show();
               }
             }
           }/*function结束*/
         });/*ajax结束*/
      }/*else结束*/
      }
});

2、兼容性说明

.mask开始如下,用的是rgba,但是IE8不兼容,改为使用png图片background:url(images/mask.png) no-repeat;

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
js实现星星海特效的示例
Sep 28 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 #Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 #Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
js实现简单的计算器功能
Jan 16 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
打架检讨书100字
2014/01/08 职场文书
环境建设实施方案
2014/03/14 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
抗洪救灾标语
2014/10/08 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
优秀护士事迹材料
2014/12/25 职场文书
小学新课改心得体会
2016/01/22 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
浅谈pytorch中的dropout的概率p
2021/05/27 Python