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 变量作用域分析
Jul 04 Javascript
关于js datetime的那点事
Nov 15 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
node.js文件上传处理示例
Oct 27 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
详解Vue的ref特性的使用
Jan 24 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
解析php类的注册与自动加载
2013/07/05 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
Django框架下在视图中使用模版的方法
2015/07/16 Python
python实现自动登录后台管理系统
2018/10/18 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python API自动化框架总结
2019/11/12 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python range实例用法分享
2020/02/06 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
房地产财务管理制度
2014/02/02 职场文书
社区健康教育实施方案
2014/03/18 职场文书
文明寝室申报材料
2014/05/12 职场文书
预备党员转正考核材料
2014/06/03 职场文书
创先争优演讲稿
2014/09/15 职场文书
同事离别感言
2015/08/04 职场文书
七个Python必备的GUI库
2021/04/27 Python
解决python3安装pandas出错的问题
2021/05/20 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技