jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

番茄西红柿发布于2019-04-23 11:43 / 1425人阅读

摘要：需求抽奖代码最多可以抽奖次，而且，每次只会中元理财金或者谢谢参与，其它的不会抽中哈哈，果然都是套路。

需求：

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

效果如下：

一、页面结构：

1 2 3 4 5 6 7 8 9 10 11 12

"g-content">
  "g-lottery-case">
    "g-left">
      您已拥有"playnum">次抽奖机会，点击立刻抽奖！~
      "g-lottery-box">
        "g-lottery-img">
        
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="开始抽奖">

标签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

样式就定一下高度，居中一下，显示一下背景图片

三、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

说到底就是用一个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

"utf-8" />
  抽奖
  "keywords" content="">
  "description" content="">
  "X-UA-Compatible" content="IE=edge">
  "renderer" content="webkit">
  


"g-content">
  "g-lottery-case">
    "g-left">
      您已拥有"playnum">次抽奖机会，点击立刻抽奖！~
      "g-lottery-box">
        "g-lottery-img">
        
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="开始抽奖">

所需要的图片(这里好像上传不了压缩文件，所以不能整个打包上传了)：

#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#

1.最外面的闪灯：ly-plate-c.gif

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

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

云服务器 GPU云服务器 php大转盘抽奖代码转盘抽奖 php抽奖转盘大转盘抽奖活动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1066.html

HTML5 Canvas圆盘抽奖应用DEMO

摘要：圆盘抽奖应用页面圆盘抽奖应用演示抱歉浏览器不支持。 HTML5 Canvas圆盘抽奖应用DEMO html页面 HTML5 Canvas圆盘抽奖应用DEMO演示抱歉！浏览器不支持。抱歉！浏览器不支持。抱歉！浏览器...

sunsmell 2019-08-30 13:20 评论0 收藏0
HTML5 Canvas圆盘抽奖应用DEMO

摘要：圆盘抽奖应用页面圆盘抽奖应用演示抱歉浏览器不支持。 HTML5 Canvas圆盘抽奖应用DEMO html页面 HTML5 Canvas圆盘抽奖应用DEMO演示抱歉！浏览器不支持。抱歉！浏览器不支持。抱歉！浏览器...

anyway 2019-08-20 13:29 评论0 收藏0
HTML5 Canvas圆盘抽奖应用DEMO

摘要：圆盘抽奖应用页面圆盘抽奖应用演示抱歉浏览器不支持。 HTML5 Canvas圆盘抽奖应用DEMO html页面 HTML5 Canvas圆盘抽奖应用DEMO演示抱歉！浏览器不支持。抱歉！浏览器不支持。抱歉！浏览器...

dinfer 2019-08-01 16:10 评论0 收藏0
vue开发微信商城项目总结之五--vue实现九宫格抽奖

摘要：根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单福币类奖品，直接发放，可在交易明细中查看优惠劵类奖品，交易明细中根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人...

CoorChice 2019-08-21 16:51 评论0 收藏0