首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

Posted in jQuery onAugust 23, 2017

需求：

最多可以抽奖5次，而且，每次只会中“2000元理财金”或者“谢谢参与”，其它的不会抽中（哈哈，果然都是套路）。

效果如下：

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

一、页面结构：

<div class="g-content">
  <div class="g-lottery-case">
    <div class="g-left">
      <h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="开始抽奖"></a>
      </div>
    </div>
  </div>
</div>

标签h2为提示内容，.playnum是剩余抽奖次数，.g-lottery-img是最外层的闪灯，.g-lottery-img是转动的内容，.playbtn是点击抽奖按钮。

这里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很简单的，没几个AIP。

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

二、简单的样式：

<style>
  .g-content {
    width: 100%;
    background: #fbe3cc;
    height: auto;
    font-family: "微软雅黑", "microsoft yahei";
  }
  .g-content .g-lottery-case {
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
  }
  .g-content .g-lottery-case .g-left h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    margin-left: 20px;
  }
  .g-content .g-lottery-case .g-left {
    width: 450px;
    float: left;
  }
  .g-lottery-box {
    width: 400px;
    height: 400px;
    margin-left: 30px;
    position: relative;
    background: url(ly-plate-c.gif) no-repeat;
  }
  .g-lottery-box .g-lottery-img {
    width: 340px;
    height: 340px;
    position: relative;
    background: url(bg-lottery.png) no-repeat;
    left: 30px;
    top: 30px;
  }
  .g-lottery-box .playbtn {
    width: 186px;
    height: 186px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -94px;
    margin-top: -94px;
    background: url(playbtn.png) no-repeat;
  }
</style>

样式就定一下高度，居中一下，显示一下背景图片

三、JS代码：

<script>
  $(function() {
    var $btn = $('.g-lottery-img');// 旋转的div
    var playnum = 5; //初始次数，由后台传入
    $('.playnum').html(playnum);//显示还剩下多少次抽奖机会
    var isture = 0;//是否正在抽奖
    var clickfunc = function() {
      var data = [1, 2, 3, 4, 5, 6];//抽奖
      //data为随机出来的结果，根据概率后的结果
      data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
      switch(data) {
        case 1:
          rotateFunc(1, 0, '恭喜您获得2000元理财金');
          break;
        case 2:
          rotateFunc(2, 0, '恭喜您获得2000元理财金2');
          break;
        case 3:
          rotateFunc(3, 0, '恭喜您获得2000元理财金3');
          break;
        case 4:
          rotateFunc(4, -60, '谢谢参与4');
          break;
        case 5:
          rotateFunc(5, 120, '谢谢参与5');
          break;
        case 6:
          rotateFunc(6, 120, '谢谢参与6');
          break;
      }
    }
    $(".playbtn").click(function() {
      if(isture) return; // 如果在执行就退出
      isture = true; // 标志为 在执行
      if(playnum <= 0) { //当抽奖次数为0的时候执行
        alert("没有次数了");
        $('.playnum').html(0);//次数显示为0
        isture = false;
      } else { //还有次数就执行
        playnum = playnum - 1; //执行转盘了则次数减1
        if(playnum <= 0) {
          playnum = 0;
        }
        $('.playnum').html(playnum);
        clickfunc();
      }
    });
    var rotateFunc = function(awards, angle, text) {
      isture = true;
      $btn.stopRotate();
      $btn.rotate({
        angle: 0,//旋转的角度数
        duration: 4000, //旋转时间
        animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
        callback: function() {
          isture = false; // 标志为 执行完毕
          alert(text);
        }
      });
    };
  });
</script>

说到底就是用一个1~6的随机数，然后把对应的角度值传给jquery.rotate.js,它就会转到相应的地方，最后做一下对应剩余次数的判断和修改。

最后所有代码为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>抽奖</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <style>
  .g-content {
    width: 100%;
    background: #fbe3cc;
    height: auto;
    font-family: "微软雅黑", "microsoft yahei";
  }
  .g-content .g-lottery-case {
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
  }
  .g-content .g-lottery-case .g-left h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    margin-left: 20px;
  }
  .g-content .g-lottery-case .g-left {
    width: 450px;
    float: left;
  }
  .g-lottery-box {
    width: 400px;
    height: 400px;
    margin-left: 30px;
    position: relative;
    background: url(ly-plate-c.gif) no-repeat;
  }
  .g-lottery-box .g-lottery-img {
    width: 340px;
    height: 340px;
    position: relative;
    background: url(bg-lottery.png) no-repeat;
    left: 30px;
    top: 30px;
  }
  .g-lottery-box .playbtn {
    width: 186px;
    height: 186px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -94px;
    margin-top: -94px;
    background: url(playbtn.png) no-repeat;
  }
  </style>
</head>
<body>
<div class="g-content">
  <div class="g-lottery-case">
    <div class="g-left">
      <h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="开始抽奖"></a>
      </div>
    </div>
  </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="jsmin/jquery.rotate.min.js"></script>
<script>
$(function() {
  var $btn = $('.g-lottery-img');// 旋转的div
  var playnum = 5; //初始次数，由后台传入
  $('.playnum').html(playnum);//显示还剩下多少次抽奖机会
  var isture = 0;//是否正在抽奖
  var clickfunc = function() {
    var data = [1, 2, 3, 4, 5, 6];//抽奖
    //data为随机出来的结果，根据概率后的结果
    data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
    switch(data) {
      case 1:
        rotateFunc(1, 0, '恭喜您获得2000元理财金');
        break;
      case 2:
        rotateFunc(2, 0, '恭喜您获得2000元理财金2');
        break;
      case 3:
        rotateFunc(3, 0, '恭喜您获得2000元理财金3');
        break;
      case 4:
        rotateFunc(4, -60, '谢谢参与4');
        break;
      case 5:
        rotateFunc(5, 120, '谢谢参与5');
        break;
      case 6:
        rotateFunc(6, 120, '谢谢参与6');
        break;
    }
  }
  $(".playbtn").click(function() {
    if(isture) return; // 如果在执行就退出
    isture = true; // 标志为 在执行
    if(playnum <= 0) { //当抽奖次数为0的时候执行
      alert("没有次数了");
      $('.playnum').html(0);//次数显示为0
      isture = false;
    } else { //还有次数就执行
      playnum = playnum - 1; //执行转盘了则次数减1
      if(playnum <= 0) {
        playnum = 0;
      }
      $('.playnum').html(playnum);
      clickfunc();
    }
  });
  var rotateFunc = function(awards, angle, text) {
    isture = true;
    $btn.stopRotate();
    $btn.rotate({
      angle: 0,//旋转的角度数
      duration: 4000, //旋转时间
      animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
      callback: function() {
        isture = false; // 标志为 执行完毕
        alert(text);
      }
    });
  };
});
</script>
</body>
</html>

所需要的图片(这里好像上传不了压缩文件，所以不能整个打包上传了)：

#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#

1.最外面的闪灯：ly-plate-c.gif

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

2.六个中奖内容：bg-lottery.png

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

3.点击抽奖按钮： playbtn.png

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

总结

以上所述是小编给大家介绍的jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

- Author -

正是泽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery处理checkbox（复选框）是否被选中实例代码
Jun 12 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
cudnn(1) 脚本(1) swing(1) Git(3) callback(1) 热力图(1) webpack(1) RTX 3050 ti(1) cudn(1) 字符画(1)
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！
2012/01/15 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器）
2016/05/13 Javascript
canvas绘制七巧板
2017/02/03 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
vue实现留言板todolist功能
2017/08/16 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python遍历小写英文字母的方法
2019/01/02 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python函数参数分类原理详解
2020/05/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
欧洲最大的婴幼儿服装及内衣公司：Petit Bateau（小帆船）
2016/08/16 全球购物
韩国CJ食品专卖网：CJonmart
2016/09/11 全球购物
POP文化和音乐灵感的时尚：Hot Topic
2019/06/19 全球购物
草莓网官网：StrawberryNET
2019/08/21 全球购物
美国最大的烧烤架和户外生活用品专业零售商：Barbeques Galore
2021/01/09 全球购物
巴西最大的巴士票务门户：Quero Passagem
2020/11/21 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
公司外出活动方案
2014/08/14 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android