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

最新推荐文章于 2021-09-12 22:07:02 发布
最新推荐文章于 2021-09-12 22:07:02 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： PHP JavaScript 文章标签： php javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46105038/article/details/107452094
版权 
<?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); //根据概率获取奖项id
    foreach ($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>

在这里插入图片描述

不会代码的小林
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
大转盘抽奖实现总中奖率可控内部逻辑分享
stz1036194999的博客
01-06 1703
/如果随机数字小于某个奖品概率则中奖 ，小建议，在遍历奖品等级和奖品概率这个map的时候应该从低等级到高等级的顺序进行遍历，也就是从三等奖 到一等奖的顺序进行循环，这样可以保证大奖不至于前期就被抽走。由于业务代码过于复杂庞大，只摘取了核心的抽奖部分，其他代码不便展示，只是分享了一个设计思路，欢迎大神给出更好的建议，还有那个抽奖公式其实就是控制随机数生成范围从而控制中奖率。//自己研究出的公式 100/中奖率x奖品里概率最大的那个概率。//每种奖品获奖概率从大到小排列。//总中奖率 0-100整数。
uniapp九宫格抽奖可控概率效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-06 534
uniapp九宫格抽奖可控概率效果demo
HTML5后台控制抽奖程序 转盘+刮刮乐
12-05
可以后台设置中奖率的抽奖程序 可直接运行 HTML5 转盘及刮刮乐
很酷的抽奖大转盘加后门
05-08
抽奖大转盘程序，按下ctrl加enter快捷键可以开始抽奖，同时可以通过后门控制中奖概率，gdi plus技术运用
jQuery+PHP实现微信转盘抽奖功能的方法
10-22
主要介绍了jQuery+PHP实现微信转盘抽奖功能的方法,详细分析了抽奖程序界面设计、前台jQuery交互、后台概率算法等抽奖功能相关技巧,需要的朋友可以参考下
ASP.NET实现大转盘抽奖源码
11-29
通过webform做框架，简单的实现了大转盘抽奖。这里没有用ashx后台处理程序来解析后台数据，而是用了一个aspx的页面来实现。前端通过ajax异步调用获取json的值来进行抽奖。后台可根据需要自己修改概率，或直接修改概率的算法。
H5抽奖轮盘，可控制概率
12-31
H5抽奖轮盘，可控制概率
H5大转盘抽奖，概率可以控制，可直接使用
AC_Surprise的博客
04-21 2427
这个代码是随手写的简易代码，可供参考，功能都有，图片都是自己在网上随意找的，里面的逻辑各方面都有，写一个html页面demo可直接看效果 效果 废话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="author" content
html5 转盘概率可控,vue写转盘抽奖功能及可根据概率去计算
weixin_31290291的博客
07-02 943
最近在做一个大转盘抽奖获取金币及激励视频，刚开始要求前端自己根据后台返的每块概率去写逻辑，后来被驳回了，不过本次记录一下写的。html部分` src="../assets/images/p3.png"class="abs com-img point-bg2"style="top: 0.35rem;width: 15rem...
html5 转盘概率可控,简单易扩展可控性强的Jquery转盘抽奖程序
weixin_39664994的博客
06-26 463
基于Jquery的Javascript转盘抽奖程序，可以自定义抽奖界面，奖品数量、图片等，可控制中奖的奖品，抽奖转盘转动的速度和圈数。在实际使用中，应当把概率放到后台程序中运算，以保证安全性和产生中奖奖品的可控性Javascript代码：var index = 1, //当前亮区位置prevIndex = 14, //前一位置Speed = 300, //初始速度Time, //计时器a...
PHP实现转盘抽奖算法分享
01-20
本文实例为大家分享了PHP实现转盘抽奖算法的具体代码，供大家参考，具体内容如下 流程： 1.拼装奖项数组 2.计算概率 3.返回中奖情况 代码如下： 中奖概率 ‘ v ‘ 可以在后台设置，传到此方法中，注意传整数 function get_gift(){ //拼装奖项数组 // 奖项id，奖品，概率 $prize_arr = array( '0' => array('id'=>1,'prize'=>'平板电脑','v'=>0), '1' => array('id'=>2,'prize'=>'数码相机','v'=>0), '2' => array('id'=>3,
转盘抽奖java后台算法
03-19
转盘抽奖java后台算法，可用ajax调用，结果返回前台，再 调用rotate，实现转盘动画效果
用jmeter对抽奖接口进行抽奖概率分析测试
DrMaker的博客
06-24 3722
设置Jmeter语言为中文环境 Jmeter菜单栏选择OptionsàChoose LanguageàChinese (Simplified) 这种方法，重启软件后又变为英文环境了。 自动化测试中奖概率jmeter实现 自动化方案： 1、中奖概率在千万级别不可能用人工进行，需要借助自动化。 2、在自动化测试工具的选择上，用Java代码脚本的形式做到千万级别的次数运行时间太长，需要借助并发测试工具。 3、考虑使用Jmeter的接口测试功能，加上并发的功能和顺序执行的逻辑来实现。 以下创建等级显示以文字来显示
html5 控制概率的抽奖,Js 控制随机数概率
weixin_29268385的博客
07-10 740
(新)控制随机数概率：https://www.cnblogs.com/whnba/p/10565045.html算法精简了一下如：取 1~10 之间的随机数，那么他们的取值范围是：整数区间概率1[0,1)0.12[1,2)0.13[2,3)0.14[3,4)0.15[4,5)0.16[5,6)0.17[6,7)0.18[7,8)0.19[8,9)0.110[9,10)0.1如果调整2的概率为0....
使用接口测试活动的中奖概率（随机事件测试)
weixin_38169798的博客
08-05 1809
有一个抽奖活动抽到一等奖的概率是万分之一，您知道怎么测试这个概率吗？ 抽奖活动的中奖事件是个随机事件，用大量的手动测试来检验中奖概率的正确性显然不可取，除了手工对中奖流程，后续处理的校验外，可以和开发配合，使用接口来测试中奖的概率是否符合预期的设计要求。 1.思路： （1)开发提供中奖的接口，get该接口（此处需要向开发详细了解）,每次随机返回以下四个结果： 0...
html抽奖代码实验原理,真正的网页抽奖-JavaScript HTML5代码
weixin_27625589的博客
05-31 521
圆盘抽奖*.{margin:0;padding:0;}#elm1{height:40px;background-color:#a00;}#elm2{height:50px;background-color:#0a0;}#wrap{position:relative;height:400px;}#bg{position:absolute;left:0;top:0;}#cell{position:ab...
php 大转盘抽奖概率 角度,在线抽奖大转盘和概率计算
weixin_35390057的博客
03-11 397
html>抽奖效果演示.rotary{position:relative;width:854px;height:504px;margin:0auto;background:#d71f2eurl(p_w_picpaths/bg1.png);}.rotaryArrow{position:absolute;left:181px;top:104px;widt...
【web前端】面题整理（1）
weixin_33906657的博客
05-20 232
这是我的面题答案整理，可能有多种答案。我也就写了一两种。整合中第一题用js实现随机选取10-100之间的10个数字，存入一个数组，去重后求和（保证这10个数字不能出现重复）要求：去重不能使用Set请完善下面的题目function sumOfRandomDistinctTenNumbers(){ // todo }复制代码我的答案分析：Math.random()*90是0到90随机数，+10...
计数器函数-注册倒计时
qq_45579661的博客
09-12 363
1.注册按钮倒计时 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
大转盘抽奖带后台html
最新发布
09-16
大转盘抽奖是一种常见的...通过使用带后台的HTML来实现大转盘抽奖，我们可以方便地管理和控制抽奖过程，同时也可以提供更好的用户体验和数据分析能力，对于商家或活动举办方来说，这是一种非常实用和有效的抽奖方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会代码的小林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值