php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒
wptr33 2025-05-05 19:03 5 浏览
抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。
1、转轮盘
本来是想直接绘图实现轮盘，但是没有找到怎么填充文字，只好把轮盘弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖
- 点击抽奖触发jquery的click事件；
- 通过ajax获取后台的随机数；
- 后台通过mt_rand得到随机奖项（角度），返回给前台；
- 通过jquery改变css transform、transition属性，旋转背景，也就是轮盘；
html代码
<style>
.box{
width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>
<div class='box' >
<div class='beij'></div>
<div class='pointer'></div>
</div>js代码
<script>
$(document).ready(function() {
var time=0.4;//转一圈所需时间 s
var count=10;//默认多转几圈
/*
var angle=new Array();
angle[0]=23;
angle[1]=53;
angle[2]=83;
angle[3]=110;
angle[4]=133;
angle[5]=163;
angle[6]=223;
*/
var i=1;
$(".pointer").click(function(){
$.ajax({
url: "/public/man/index.php/api/choujiang",
data:'',
type: "post",
dataType: "json",
success: function(result) {
//console.log(result.msg);
$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
//弹窗提示
//setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
}
})
i++;
});
});
</script>说明：
- 因为改变css进行旋转，开始的时候，直接执行了弹窗或者是console.log，这并不符合我们的要求，加入了setTimeout，在旋转完成以后，再给出提示；
- time*1000*(5+result.angle/360) 是总得旋转时间；
后台接口程序
public function choujiang(){
/*
id 奖品编号
title 中奖提示
prec 中奖概率
angle 旋转角度
*/
$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等奖：苹果手机一部！','prec'=>1,'angle'=>23);
$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等奖：Ipad','prec'=>2,'angle'=>68);
$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等奖：','prec'=>25,'angle'=>113);
$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等奖','prec'=>50,'angle'=>155);
$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等奖','prec'=>80,'angle'=>202);
$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等奖','prec'=>150,'angle'=>245);
$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等奖','prec'=>240,'angle'=>290);
$arr[7]=array('id'=>8,'title'=>'获得50元优惠券，还需加油哦！','prec'=>380,'angle'=>337);
//中奖几率求和
$cmun=0;
for($i=0;$i<=count($arr)-1;$i++){
$cmun+=$arr[$i]['prec'];
}
//中奖随机数
$smrand=mt_rand(1,$cmun);
$this->getRand(1,0,$arr,count($arr),$smrand);
}
public function getrand($m,$im,$arr,$count,$smrand){
/*
$m 起始数
$im 第几个数组元素
$count 数组总得元素个数
$arr 原始数组
$smrand 中奖随机数
*/
//已经中奖
if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
//中奖返回
$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//最后一个不需要判断 直接返回
if($im+1==$count-1){
$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//起始数字
$start=$arr[$im]['prec']+$m;
//递归 再次调用数组 读取下一个数组元素
$this->getrand($start,$im+1,$arr,$count,$smrand);
}
}
}说明：
- 以上概率算法采用的是所有概率求和做分母、出现的概率做分子，如果才有百分比，实现方式是一样的；
- 采用递归，依次判断每一次的起始数字和结束数字，中奖的随机数是否在该范围内，在，就是中得该奖项，否则没中，再判断下一个；
- 最后一个数组元素是不需要判断的，前边的都不是，最后一个一定就是中奖；
- 记录谁获得了什么奖项，应该是在后台返回数据之前，不能是前台弹窗以后通过ajax通知后台中奖信息；
2、随机抽取一个幸运员工
点击开始抽奖，单行文本框循环显示员工，抽奖按钮文字变为停止，点击停止的时候，抽中的员工显示在获奖名单。
html代码
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>获奖名单</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>开始抽奖</button></div>js代码
<script>
var t;
var yuangong=new Array();
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if($(this).html()=='开始抽奖'){
if(yuangong.length>=3){
$(this).html("停止");
start();
}
}else{
$(this).html("开始抽奖");
stop();
}
});
});
function start() {
num = Math.floor(Math.random() * (yuangong.length-1));
$('#ygname').val(yuangong[num]['title']);
t = setTimeout(start, 0);
}
function stop() {
clearInterval(t);
//数组中删除中奖员工信息防止重复中奖
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
$(".box ul").append("<li>"+$('#ygname').val()+"</li>");
}
</script>说明：
num = Math.floor(Math.random() * (yuangong.length));
- yuangong.length员工数组长度；
- Math.random() 0到1的小数，包含0，不包含1；
- Math.floor 小数向下取整，可以为0；
综上：num得到的是0到数组下标的随机数。
clearInterval(t)：用于停止t = setTimeout(start, 0);
后台php接口程序
public function yuangong(){
$yuangong[0]=array('id'=>1,'title'=>'业务部【张三】');
$yuangong[1]=array('id'=>2,'title'=>'技术部【李四】');
$yuangong[2]=array('id'=>3,'title'=>'技术部【逍遥】');
$yuangong[3]=array('id'=>4,'title'=>'会计部【薛嫣】');
$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');
$msg=array('msg'=>$yuangong);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}3、随机抽取多个幸运员工
没有想到什么效果，只是单纯地获取了随机数
html代码
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>获奖名单</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'> <button id='choujiang'>开始抽奖</button></div>js代码
<script>
var yuangong=new Array();
var ygstr='';//存取获奖员工
var ygrs=5;//一次抽几个
var t;
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if(yuangong.length>=ygrs){
start(1);
}
});
});
function start(ms) {
//ms 第几次获取员工信息
num = Math.floor(Math.random() * (yuangong.length));
console.log(num);
ygstr+="<li>"+yuangong[num]['title']+"</li>";
if(ms>=ygrs){
$(".box ul").html(ygstr);
ygstr="";
}else{
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
start(ms+1);
}
}
</script>4、在线开盲盒
需要我们点击抽奖的时候通过ajax读取后台获得的盲盒信息，直接显示到前台，前台显示同上边的，都是一样，说一下后台程序。
使用array_rand().随机获取几个数组元素
array_rand($arr,$count).用法
- $arr目标数组；
- $count随机的个数;
返回值是原数组的下标。
public function manghe(){
$goods[0]=array('id'=>1,'title'=>'手机');
$goods[1]=array('id'=>2,'title'=>'毛绒玩具');
$goods[2]=array('id'=>3,'title'=>'化妆品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'学习用品');
$goods[6]=array('id'=>7,'title'=>'电脑');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
$msg=array('msg'=>$rearr);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}如果包含特殊奖项，需要满足抽奖多少次，一定抽中，可以达到抽奖次数以后在array_rand内随机数减一，然后把大奖塞进该次抽奖的返回信息。
array_push($rearr,$a)用法：
- $rearr目标数组；
- $a追加的元素或者是数组
$tebie[999]=array('id'=>999,'title'=>'特别大奖');
$goods[0]=array('id'=>1,'title'=>'手机');
$goods[1]=array('id'=>2,'title'=>'毛绒玩具');
$goods[2]=array('id'=>3,'title'=>'化妆品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'学习用品');
$goods[6]=array('id'=>7,'title'=>'电脑');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
array_push($rearr,$tebie[999]);
dump($rearr);
exit;输出结果：
array(4) {
[0] => array(2) {
["id"] => int(2)
["title"] => string(12) "毛绒玩具"
}
[1] => array(2) {
["id"] => int(3)
["title"] => string(9) "化妆品"
}
[2] => array(2) {
["id"] => int(6)
["title"] => string(12) "学习用品"
}
[3] => array(2) {
["id"] => int(999)
["title"] => string(12) "特别大奖"
}
}相关推荐
- 史上最强vue总结，面试开发全靠它了
-
vue框架篇vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了angular的特点，...
- Node.js Stream - 实战篇（node.js 10实战）
-
本文转自“美团点评技术团队”http://tech.meituan.com/stream-in-action.html背景前面两篇（基础篇和进阶篇）主要介绍流的基本用法和原理，本篇从应用的角度，介...
- JavaScript 中的 4 种新方法指南Array.
-
JavaScript中的4种新方法指南Array.prototypeArray其实和Python中的l列表list的操作用非常像JavaScript语言标准的最新版本是ECMAScript...
- Js基础31:内置对象（js 内置对象）
-
js里面的对象分成三大类：内置对象ArrayDateMath...
- 常见vue面试题，大厂小厂都一样（vue经典面试题）
-
一、谈谈你对MVVM的理解？...
- 最全的 Vue 面试题+详解答案（vue面试题2020例子以及答案）
-
前言本文整理了...
- 不产生新的数组，删除数组里的重复元素
-
数组去重的方式有很多，我们可以使用Set去重、filter过滤等，详见携程&蘑菇街&bilibili：手写数组去重、扁平化函数...
- 更简单的Vue3中后台动态路由 + 侧边栏渲染方案
-
时至今日，vue2已经升级到了vue3，动态路由的实现方案也同步做出了一些升级迭代，帮助开发者们更高效的完成业务需求，然后摸鱼。本次逻辑的升级，主要聚焦于2点更加简单的实现逻辑更加便捷的路由配置...
- js常用数组API方法汇总（js数组api有哪些）
-
1.push()向数组末尾添加一个或多个元素，并返回新的长度。//1.push()向数组末尾添加一个或多个元素，并返回新的长度。constarr1=[1,2,3];const...
- JavaScript 数组操作方法大全（js数组的用法）
-
数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法（包括ES6的map、forEach、every、some、filter、find、from、of等）...
- Array类型简介（arrays类常用方法）
-
Array类型除了Object之外，Array类型恐怕是ECMAScript中最常用的类型了。而且，ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。虽然ECMAScript数组与其...
- 鸿蒙开发基础——TypeScript Array对象解析
-
数组对象是使用单独的变量名来存储一系列的值。TypeScript的数组对象提供了强大的类型支持，确保数组操作的类型安全。...
- js中splice的用法，使用说明及例程
-
js中splice的用法，使用说明及例程。splice()方法用于添加或删除数组中的元素，使用起来很怪异。删除会影响原有数组，会返回删除的内容。例1，删除数组内容：varstr=["a&#...
- 3个 Vue $set 的应用场景（vue中set方法应用场景）
-
大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员，关注我，科技未来或许我能帮到你！...
- 一周热门
-
-
C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)
-
因果推断Matching方式实现代码 因果推断模型
-
git pull命令使用实例 git pull--rebase
-
git pull 和git fetch 命令分别有什么作用?二者有什么区别?
-
面试官:git pull是哪两个指令的组合?
-
git 执行pull错误如何撤销 git pull fail
-
git fetch 和git pull 的异同 git中fetch和pull的区别
-
git pull 之后本地代码被覆盖 解决方案
-
还可以这样玩?Git基本原理及各种骚操作，涨知识了
-
git命令之pull git.pull
-
- 最近发表
- 标签列表
-
- git pull (33)
- git fetch (35)
- mysql insert (35)
- mysql distinct (37)
- concat_ws (36)
- java continue (36)
- jenkins官网 (37)
- mysql 子查询 (37)
- python元组 (33)
- mysql max (33)
- mybatis 分页 (35)
- vba split (37)
- redis watch (34)
- python list sort (37)
- nvarchar2 (34)
- mysql not null (36)
- hmset (35)
- python telnet (35)
- python readlines() 方法 (36)
- munmap (35)
- docker network create (35)
- redis 集合 (37)
- python sftp (37)
- setpriority (34)
- c语言 switch (34)