抽奖转盘，实现后台概率控制

<?php
index();function index(){$prize_arr = array('0' => array('id'=>1,'prize'=>'平板电脑','v'=>1),'1' => array('id'=>2,'prize'=>'数码相机','v'=>1),'2' => array('id'=>3,'prize'=>'音箱设备','v'=>1),'3' => array('id'=>4,'prize'=>'4G优盘','v'=>5),'4' => array('id'=>5,'prize'=>'10Q币','v'=>2),'5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50),);foreach ($prize_arr as $k => $v) {$arr[$v['id']] = $v['v'];}$rid = get_rand($arr); //根据概率获取奖项idforeach ($prize_arr as $k => $v) {if ($v['id']==$rid){var_dump($k);break;}}
}function get_rand($proArr) {$result = '';//概率数组的总概率精度$proSum = array_sum($proArr);//概率数组循环foreach ($proArr as $k => $v) {$randNum = mt_rand(1, $proSum);if ($randNum <= $v) {$result = $k;break;} else {$proSum -= $v;}}return $result;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>幸运大转盘</title><style>* { /* 重置默认样式 */margin: 0;padding: 0;border: none;outline: none;user-select: none;}.wrapper {position: relative;height: 200px;width: 200px;padding: 20px;margin: 20px;background-color: #ff5555;box-shadow: #000000 0px 0px 10px;border-radius: 50%;}.light {position: absolute;height: 10px;width: 10px;border-radius: 50%;top: 5px;left: 115px;transform-origin: 5px 115px;}.light-twinkling {animation: 1s twinkling 3, 100ms 3s twinkling 3;}.light:nth-child(2n) {background-color: #fafce7;}.light:nth-child(2n+1) {background-color: #ffe58b;}.light:nth-child(2) {transform: rotate(36deg);}.light:nth-child(3) {transform: rotate(72deg);}.light:nth-child(4) {transform: rotate(108deg);}.light:nth-child(5) {transform: rotate(144deg);}.light:nth-child(6) {transform: rotate(180deg);}.light:nth-child(7) {transform: rotate(216deg);}.light:nth-child(8) {transform: rotate(252deg);}.light:nth-child(9) {transform: rotate(288deg);}.light:nth-child(10) {transform: rotate(324deg);}.panel {position: relative;height: 200px;width: 200px;background-color: #b7b7b7;border-radius: 100px;}.sector {position: absolute;left: 100px;top: 0px;width: 100px;height: 200px;font-size: 14px;border-radius: 0px 100px 100px 0;overflow: hidden;transform-origin: left center;}.sector:nth-child(1) {transform: rotate(-18deg);}.sector:nth-child(2) {transform: rotate(18deg);}.sector:nth-child(3) {transform: rotate(54deg);}.sector:nth-child(4) {transform: rotate(90deg);}.sector:nth-child(5) {transform: rotate(126deg);}.sector:nth-child(6) {transform: rotate(162deg);}.sector:nth-child(7) {transform: rotate(198deg);}.sector:nth-child(8) {transform: rotate(234deg);}.sector:nth-child(9) {transform: rotate(270deg);}.sector:nth-child(10) {transform: rotate(306deg);}.sector:nth-child(2n+1) .sector-inner {background: #fef6e0;}.sector:nth-child(2n) .sector-inner {background: #ffffff;}.sector-inner {text-align: center;display: block;width: 40px;padding: 5px 3px 0 57px;height: 195px;transform: translateX(-100px) rotate(36deg);transform-origin: right center;border-radius: 100px 0 0 100px;}.sector-inner span {display: block;transform-origin: center;transform: rotate(-19deg);color: #d46854;}.pointer {position: absolute;left: 79px;top: 79px;z-index: 10;height: 30px;width: 30px;padding: 6px;color: #fff899;line-height: 15px;font-size: 12px;text-align: center;background-color: #ff5350;border-radius: 50%;border: 1px solid #ff5350;transition: transform 3s cubic-bezier(.2,.93,.43,1);}.pointer::after {content: '';position: absolute;left: 14px;top: -24px;border-width: 12px 6px;border-style: solid;border-color: transparent;border-bottom-color: #ff5350;transform-origin: center;}.result {margin: 20px 60px;}@keyframes twinkling {50% { background: transparent; }}</style>
</head>
<body><div class="wrapper"><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="panel"><div class="sector"><div class="sector-inner"><span>谢谢参与</span></div></div><div class="sector"><div class="sector-inner"><span> 5 0 积分</span></div></div><div class="sector"><div class="sector-inner"><span>谢谢参与</span></div></div><div class="sector"><div class="sector-inner"><span>100元话费</span></div></div><div class="sector"><div class="sector-inner"><span> 5 0 积分</span></div></div><div class="sector"><div class="sector-inner"><span>谢谢参与</span></div></div><div class="sector"><div class="sector-inner"><span>100元话费</span></div></div><div class="sector"><div class="sector-inner"><span>谢谢参与</span></div></div><div class="sector"><div class="sector-inner"><span> 5 0 积分</span></div></div><div class="sector"><div class="sector-inner"><span>10元话费</span></div></div><div class="pointer">开始抽奖</div></div></div><div class="result"></div><script>let getEle = document.getElementsByClassName.bind(document);let pointer = getEle('pointer')[0];let result = getEle('result')[0];let lights = Array.prototype.slice.call(getEle('light'));let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分', '谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];let rotateDeg=0;// 根据随机角度获取奖励let getReward = (function() {currentDeg = 0;return function() {let int=Math.floor(Math.random()*9);  //模拟抽中的奖品下标，由后台返回。switch(int){case 0:rotateDeg=RandomNum(-18,18);break;case 1:rotateDeg=RandomNum(18,54);break;case 2:rotateDeg=RandomNum(54,90);break;case 3:rotateDeg=RandomNum(90,126);break;case 4:rotateDeg=RandomNum(126,162);break;case 5:rotateDeg=RandomNum(162,198);break;case 6:rotateDeg=RandomNum(198,234);break;case 7:rotateDeg=RandomNum(234,270);break;case 8:rotateDeg=RandomNum(270,306);break;case 9:rotateDeg=RandomNum(306,342);break;}// 转三圈到四圈// 0[-18,18]// 1[18,54]// 2[54,90]// 3[90,126]// 4[126,162]// 5[162,198]// 6[198,234]// 7[234,270]// 8[270,306]// 9[270,306]if(currentDeg==0){currentDeg=rotateDeg+1080;}else{var last=currentDeg-Math.floor(currentDeg/360)*360;//上一次到的角度var distance=360-last;//距离360相差多少    currentDeg=currentDeg+distance+rotateDeg+1080; }let rewardText = reward[int]return {deg: currentDeg,text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText}}})();function RandomNum(Min, Max) {var Range = Max - Min;var Rand = Math.random();var num = Min + Math.floor(Rand * Range);  //舍去return num;}pointer.addEventListener('click', () => {if (onRotation) return;// console.log('开始抽奖');onRotation = true;lights.forEach(light => { light.className += ' light-twinkling'; });let nextStatus = getReward();// console.log(nextStatus)result.innerText = nextStatus.text;result.style.display = 'none';pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;})pointer.addEventListener('transitionend', () => {// console.log('抽奖结束');setTimeout(() => { // 等闪烁三下结束onRotation = false;lights.forEach(light => { light.className = 'light'; });result.style.display = 'block';}, 300);})</script>
</body>
</html>

抽奖转盘，实现后台概率控制相关推荐

php实现转盘游戏后台奖品按照概率发放
原文游戏转盘PHP后台实现奖品发放 <?phpheader("Content-type:text/html;charset=GB2312"); //设置编码//中奖奖品 $ ...
微信小程序抽奖转盘v1.1（更新圈数控制和速度控制）
因业务需要一个抽奖大转盘,时间紧迫就去网上找了一个仿天猫的抽奖转盘.但是发现他有很多问题,例如无法设定结果,代码混乱等.我的这个是在他基础之上修改,原帖地址找不到了... github:https:/ ...
抽奖开源 html5,抽奖转盘.html · smilestone/awardRotate - Gitee.com
jQuery 抽奖转盘 #box{width: 340px;height: 340px; position: absolute; left:50%;top:50%;margin-left:-170px ...
jquery php抽奖转盘,JQuery+PHP转盘抽奖程序源码下载
本站之前有提供过一个简单易扩展.可控性强的Jquery转盘抽奖程序,主要讲述了前端实现抽奖表现的部分,这里给出另一个完整的php转盘抽奖程序,通过使用jQuery和PHP来实现,用PHP后台代码控制抽 ...
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果基本是用CSS实现的,没有用图片,加一丢丢JS.不过没有考虑太多兼容性. 首先画一个转盘 & ...
详解与重构hyman《Android SurfaceView实战打造抽奖转盘》
详解与重构hyman<Android SurfaceView实战打造抽奖转盘> 作者:邵励治一.概述--关于SurfaceView您不得不知道的二三事 1.SurfaceView是干什 ...
Android实现抽奖转盘
慕客网视频传送门:http://www.imooc.com/learn/444 好久都没去慕客网了,虽然这次学习的是一个比较老的视频了,但是总比不学的好.(末尾附源码) 在学习之前,先来了解一波Sur ...
用 CSS 实现一个抽奖转盘(附详细代码+思路)
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html ...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...

抽奖转盘，实现后台概率控制

抽奖转盘，实现后台概率控制相关推荐

最新文章

热门文章