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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
农村门前三包责任书
2014/07/25 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
计算机实训报告总结
2014/11/05 职场文书
学习党章的体会
2014/11/07 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
神秘岛读书笔记
2015/07/01 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers