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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
浅谈Angular单元测试总结
2019/03/22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python二维图制作的实例代码
2020/12/03 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
军训鉴定表自我鉴定
2014/02/13 职场文书
抽奖活动主持词
2014/03/31 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
党员进社区活动总结
2015/05/07 职场文书
交通事故调解协议书
2015/05/20 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书