jquery rotate api 收藏 0

php手把手教你做网站（三十八）jquery 转抽奖，开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。

图1 转抽奖

图2 转抽奖结果

1、转

本来是想直接绘图实现，但是没有找到怎么填充文字，只好把弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖

1. 点击抽奖触发jquery的click事件；
2. 通过ajax获取后台的随机数；
3. 后台通过mt_rand得到随机奖项（角度），返回给前台；
4. 通过jquery改变css transform、transition属性，旋转背景，也就是；

html代码

js代码

说明：

1. 因为改变css进行旋转，开始的时候，直接执行了弹窗或者是console.log，这并不符合我们的要求，加入了setTimeout，在旋转完成以后，再给出提示；
2. time*1000*(5+result.angle/360) 是总得旋转时间；

后台接口程序

说明：

1. 以上概率算法采用的是所有概率求和做分母、出现的概率做分子，如果才有百分比，实现方式是一样的；
2. 采用递归，依次判断每一次的起始数字和结束数字，中奖的随机数是否在该范围内，在，就是中得该奖项，否则没中，再判断下一个；
3. 最后一个数组元素是不需要判断的，前边的都不是，最后一个一定就是中奖；
4. 记录谁获得了什么奖项，应该是在后台返回数据之前，不能是前台弹窗以后通过ajax通知后台中奖信息；

2、随机抽取一个幸运员工

点击开始抽奖，单行文本框循环显示员工，抽奖按钮文字变为停止，点击停止的时候，抽中的员工显示在获奖名单。

图3 随机抽取幸运员工

html代码

js代码

说明：

num = Math.floor(Math.random() * (yuangong.length));

1. yuangong.length员工数组长度；
2. Math.random() 0到1的小数，包含0，不包含1；
3. Math.floor 小数向下取整，可以为0；

综上：num得到的是0到数组下标的随机数。

clearInterval(t)：用于停止t = setTimeout(start, 0);

后台php接口程序

3、随机抽取多个幸运员工

没有想到什么效果，只是单纯地获取了随机数

html代码

js代码

4、在线开盲盒

需要我们点击抽奖的时候通过ajax读取后台获得的盲盒信息，直接显示到前台，前台显示同上边的，都是一样，说一下后台程序。

使用array_rand().随机获取几个数组元素

array_rand($arr,$count).用法

1. $arr目标数组；
2. $count随机的个数;

返回值是原数组的下标。

如果包含特殊奖项，需要满足抽奖多少次，一定抽中，可以达到抽奖次数以后在array_rand内随机数减一，然后把大奖塞进该次抽奖的返回信息。

array_push($rearr,$a)用法：

1. $rearr目标数组；
2. $a追加的元素或者是数组

输出结果：

国外流行的jQuery倒计时插件！

有许多的插件，提供额外的功能和特点配合网站布局。然而，许多熟练的开发者能够不错的使用。基于当前的设计趋势和标准的。下面我们分享几款比较流行的jquery插件。

1.SyoTimer

jQuery插件对HTML页面的倒计时。

2.Simple Timer

一个jQuery插件，创建一个计时器。

3.CountdownCube

一个jQuery插件倒数计时器，创建年，月，日，形成一束旋转的3D立方体。

4.Sandywatch

sandywatch定义三个不同的主题，提供一个很好的处理邮件订阅管理界面。

5.jQuery Reverse Countdown Timer

6.jQuery Responsive Countdown

这是一个基于JavaScript的工具使用画布对象定义动画SVG图。该工具使用翻转动画显示一个目标日期剩余的时间或经过的时间。该工具检测到其容器对象的宽度和高度的变化并做出相应的响应。由于采用矢量数据得出的数字和倒计时的面板，在显示的图纸的质量没有变化，当它得到调整。该工具的功能选择自定义还可以用在一个简单的配置上。

7.jQuery TimeCircles

jQuery插件显示时间或时间到一个特定的时间。

8.TimeTo

jQuery插件–倒计时的数字钟。

8.jCountdown

jcountdown是一个高度可定制的jQuery插件，可以很容易地使用在网站上，可以尝试一些不同的预览页面设置，并检查所有的属性和方法。

9.jQuery.countdown

适合用于任何布局插件，无任何CSS / HTML的依赖。目的是为了适应和模仿不同的倒计时样式。

更多请关注我们的公众号

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com