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网页加载进度条的实现
Jun 01 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jquery实现简单拖拽效果
Jul 20 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP如何编写易读的代码
2007/07/10 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python简单I/O操作示例
2019/03/18 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
python3中数组逆序输出方法
2020/12/01 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
毕业设计说明书
2014/05/07 职场文书
学习张林森心得体会
2014/09/10 职场文书
补充协议书
2015/01/28 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
python如何为list实现find方法
2022/05/30 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技