需求：

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

效果如下：

一、页面结构：

?
1
2
3
4
5
6
7
8
9
10
11
12
<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。

二、简单的样式：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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,它就会转到相应的地方，最后做一下对应剩余次数的判断和修改。

最后所有代码为：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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

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

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

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码的更多相关文章

  1. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  2. jQuery.rotate.js（控制图片转动）

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  3. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  4. jquery.rotate.js实现旋转动画

    1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...

  5. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  6. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  7. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  8. jquery.rotate.js库中的rotate函数怎么用。

    rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...

  9. jQuery旋转插件jquery.rotate.js 让图片旋转

    演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...

随机推荐

  1. mybatis查询异常-Error querying database. Cause: java.lang.ClassCastException: org.apache.ibatis.executor.ExecutionPlaceholder cannot be cast to java.util.List

    背景,mybatis查询的时候直接取的sqlsession,没有包装成SqlSessionTemplate,没有走spring提供的代理. 然后我写的获取sqlsession的代码没有考虑到并发的情况 ...

  2. 基于SpringBoot + Mybatis实现SpringMVC Web项目

    一.热身 一个现实的场景是:当我们开发一个Web工程时,架构师和开发工程师可能更关心项目技术结构上的设计.而几乎所有结构良好的软件(项目)都使用了分层设计.分层设计是将项目按技术职能分为几个内聚的部分 ...

  3. window安装mysql5.7解压版（解决乱码问题）

    ♣安装mysql两种方法 ♣下载mysql5.7解压版 ♣配置步骤 ♣解决服务无法启动 ♣解决乱码 1.安装mysql两种方法 MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果 ...

  4. Java公开课-06.单例

    一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...

  5. SSM-MyBatis-06：Mybatis中openSession到底做了什么

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 1.找SqlSesionFactory实现类 Ctrl+H:DefaultSqlSessionFactory: ...

  6. 《嵌入式Linux内存使用与性能优化》笔记

    这本书有两个关切点:系统内存(用户层)和性能优化. 这本书和Brendan Gregg的<Systems Performance>相比,无论是技术层次还是更高的理论都有较大差距.但是这不影 ...

  7. Linux时间子系统之一：clock source（时钟源）

    clock source用于为Linux内核提供一个时间基线,如果你用linux的date命令获取当前时间,内核会读取当前的clock source,转换并返回合适的时间单位给用户空间.在硬件层,它通 ...

  8. Kali Linux远程连接Windows服务器

    前言: 为了在Kali上远程连接Windows系统的服务器我们需要安装两个工具,rdesktop和tsclient.另外,我们从主机服务商那里购买的Windows操作系统的服务器都是默认开启了远程连接 ...

  9. Day2 《机器学习》第二章学习笔记

    这一章应该算是比价了理论的一章,我有些概率论基础,不过起初有些地方还是没看多大懂.其中有些公式的定义和模型误差的推导应该还是很眼熟的,就是之前在概率论课上提过的,不过有些模糊了,当时课上学得比较浅. ...

  10. 利用 ssh 的用户配置文件 config 管理 ssh 会话

    http://dhq.me/use-ssh-config-manage-ssh-session 利用 ssh 连接远程服务器,一般都要输入以下类似命令: 1 ssh user@hostname -p ...