需求：

抽奖代码最多可以抽奖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. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  2. DX11 Without DirectX SDK--01 DirectX11初始化

    回到 DirectX11--使用Windows SDK来进行开发 由于个人觉得龙书里面第4章提供的Direct3D 初始化项目封装得比较好,而且DirectX SDK Samples里面的初始化程序过 ...

  3. 深入浅出 TCP/IP 协议

    TCP/IP 协议栈是一系列网络协议的总和,是构成网络通信的核心骨架,它定义了电子设备如何连入因特网,以及数据如何在它们之间进行传输.TCP/IP 协议采用4层结构,分别是应用层.传输层.网络层和链路 ...

  4. 敏捷方法之极限编程(XP)和 Scrum

    区别之一:  迭代长度的不同 XP的一个Sprint的迭代长度大致为1~2周, 而Scrum的迭代长度一般为 2~ 4周. 区别之二: 在迭代中, 是否允许修改需求 XP在一个迭代中,如果一个User ...

  5. 数组、ArrayList、List、LinkedList的区别

    一.数组 数组在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. 1.一维数组 声明一个数组: ]; 初始化一个数组: ] { , , , , }; //定长 声明并初始化: ...

  6. SSM-SpringMVC-29：SpringMVC中InitBinder的初步

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 之前博客的配置日期类型转换器,他是全局的,如果只是一个处理器中使用怎么办? 引出@InitBinder注解 ...

  7. Ubuntu安装和卸载.bundle格式的VMware

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=628 前言: 本文中用于演示的.bundle文件是VMware-Workstation-Full-14.1.1-75 ...

  8. Kali Linux图形界面与命令行界面的切换

    前言: 有时候为了节约系统资源,使用命令行界面能够让Linux系统的运行更加流畅,处理任务的速度也更加快.现在的Kali安装完成后默认是开机就启动图形化界面.本文将介绍通过编辑Kali启动引导文件的方 ...

  9. Java 精简Jre jar打包成exe

    #开始 最近几天都在忙一个事情,那就是尝试精简jre,我想不明白为什么甲骨文官方不出exe打包工具... 网络上精简jre的文章很多,但是原创的似乎没几个,绝大多数都是转发同一个博客, 这里借鉴了不少 ...

  10. Spring Batch 专题

    如今微服务架构讨论的如火如荼.但在企业架构里除了大量的OLTP交易外,还存在海量的批处理交易.在诸如银行的金融机构中,每天有3-4万笔的批处理作业需要处理.针对OLTP,业界有大量的开源框架.优秀的架 ...