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基础第一章 JavaScript与用户端
Jul 22 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
Ajax实现异步加载数据
Nov 17 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
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
短信提示使用 特效
2007/01/19 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
js href的用法
2010/05/13 Javascript
js里的prototype使用示例
2010/11/19 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
如何快速上手Vuex
2017/02/14 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
基于python log取对数详解
2018/06/08 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python的flask框架难学吗
2020/07/31 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
触摸春天教学反思
2014/02/03 职场文书
理财投资建议书
2014/03/12 职场文书
golang中的空slice案例
2021/04/27 Golang
Golang 对es的操作实例
2022/04/20 Golang