首页
所有分类
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.picsign图片标注组件实例详解
Feb 02 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery选择器选中最后一个元素，倒数第二个元素操作示例
Dec 10 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jquery实现拖拽小方块效果
Dec 10 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
frozenset(1) el-table(1) Mybatis-Plus(3) 脚手架(2) Next.js(1) SingleFlight(2) set(1) create(1) 并发(8) TableField(1)
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
laravel学习教程之关联模型
2016/07/30 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript import css实例代码
2008/07/18 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
说一说Python logging
2016/04/15 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python matplotlib可视化实例解析
2020/06/01 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Web Service面试题：如何搭建Axis2的开发环境
2012/06/20 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
技术总监岗位职责
2013/12/05 职场文书
护理专业自荐信范文
2015/03/06 职场文书
小学教研工作总结2015
2015/05/13 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
python 如何执行控制台命令与操作剪切板
2021/05/20 Python