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 相关文章推荐
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现影院选座订座效果
Apr 13 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
You might like
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php计算十二星座的函数代码
2012/08/21 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python实现简单的socket server实例
2015/04/29 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python实现视频压缩功能
2020/12/18 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
技校毕业生的自我评价
2013/12/27 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
函授自我鉴定范文
2014/02/06 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
党建工作经验交流材料
2014/05/25 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
党建工作汇报材料
2014/12/24 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
导游词之井冈山
2019/11/20 职场文书