찾다
백엔드 개발PHP 튜토리얼PHP+jQuery翻板抽奖功能实现,jquery鎶藉_PHP教程

PHP+jQuery翻板抽奖功能实现,jquery鎶藉

翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟练掌握jQuery和PHP相关知识。

HTML
与本站上篇文章不同的是,翻板抽奖不提供开始和结束抽奖按钮,抽奖者自己决定选取其中的某一个方块,来完成抽奖的,所以我们在页面中放置6个方块,并且用1-6来表示不同的方块。

<ul id="prize"> 
  <li class="red" title="点击抽奖">1</li> 
  <li class="green" title="点击抽奖">2</li> 
  <li class="blue" title="点击抽奖">3</li> 
  <li class="purple" title="点击抽奖">4</li> 
  <li class="olive" title="点击抽奖">5</li> 
  <li class="brown" title="点击抽奖">6</li> 
</ul> 
<div><a href="#" id="viewother">【翻开其他】</a></div> 
<div id="data"></div> 

html结构中,我们使用一个无序列表放置6个不同的方块,每个li中的clas属性表示该方块的颜色,列表下面是一个链接a#viewother,用来完成抽奖后,点击它,翻看其他方块背面的中奖信息,默认是隐藏的。接下来还有一个div#data,它是空的,作用是用来临时存储未抽中的其他奖项数据,具体情况看后面的代码。为了让6个方块并排看起来舒服点,您还需要用CSS来美化下,具体可参照demo,本文中不再贴出css代码。
PHP
我们先完成后台PHP的流程,PHP的主要工作是负责配置奖项及对应的中奖概率,当前端页面点击翻动某个方块时会想后台PHP发送ajax请求,那么后台PHP根据配置的概率,通过概率算法给出中奖结果,同时将未中奖的奖项信息一并以JSON数据格式发送给前端页面。
先来看概率计算函数

function get_rand($proArr) { 
  $result = ''; 
 
  //概率数组的总概率精度 
  $proSum = array_sum($proArr); 
 
  //概率数组循环 
  foreach ($proArr as $key => $proCur) { 
    $randNum = mt_rand(1, $proSum); 
    if ($randNum <= $proCur) { 
      $result = $key; 
      break; 
    } else { 
      $proSum -= $proCur; 
    } 
  } 
  unset ($proArr); 
 
  return $result; 
} 

上述代码是一段经典的概率算法,$proArr是一个预先设置的数组,假设数组为:array(100,200,300,400),开始是从1,1000这个概率范围内筛选第一个数是否在他的出现概率范围之内, 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间,在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的。这样筛选到最终,总会有一个数满足要求。就相当于去一个箱子里摸东西,第一个不是,第二个不是,第三个还不是,那最后一个一定是。这个算法简单,而且效率非常高,关键是这个算法已在我们以前的项目中有应用,尤其是大数据量的项目中效率非常棒。
接下来我们通过PHP配置奖项。

$prize_arr = array( 
  '0' => array('id'=>1,'prize'=>'平板电脑','v'=>1), 
  '1' => array('id'=>2,'prize'=>'数码相机','v'=>5), 
  '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10), 
  '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12), 
  '4' => array('id'=>5,'prize'=>'10Q币','v'=>22), 
  '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50), 
); 

中是一个二维数组,记录了所有本次抽奖的奖项信息,其中id表示中奖等级,prize表示奖品,v表示中奖概率。注意其中的v必须为整数,你可以将对应的奖项的v设置成0,即意味着该奖项抽中的几率是0,数组中v的总和(基数),基数越大越能体现概率的准确性。本例中v的总和为100,那么平板电脑对应的中奖概率就是1%,如果v的总和是10000,那中奖概率就是万分之一了。
每次前端页面的请求,PHP循环奖项设置数组,通过概率计算函数get_rand获取抽中的奖项id。将中奖奖品保存在数组$res['yes']中,而剩下的未中奖的信息保存在$res['no']中,最后输出json个数数据给前端页面。

foreach ($prize_arr as $key => $val) { 
  $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //根据概率获取奖项id 
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项 
unset($prize_arr[$rid-1]); //将中奖项从数组中剔除,剩下未中奖项 
shuffle($prize_arr); //打乱数组顺序 
for($i=0;$i<count($prize_arr);$i++){ 
  $pr[] = $prize_arr[$i]['prize']; 
} 
$res['no'] = $pr; 
echo json_encode($res); 

直接输出中奖信息就得了,为何还要把未中奖的信息也要输出给前端页面呢?请看后面的前端代码。
jQuery
首先为了实现翻板效果,我们需要预先加载翻动插件及jquery,jqueryui相关插件:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.flip.min.js"></script> 

接下来,我们通过单击页面中的方块,来完成抽奖行为。

$(function(){ 
  $("#prize li").each(function(){ 
    var p = $(this); 
    var c = $(this).attr('class'); 
    p.css("background-color",c); 
    p.click(function(){ 
      $("#prize li").unbind('click'); 
      $.getJSON("data.php",function(json){ 
        var prize = json.yes; //抽中的奖项 
        p.flip({ 
          direction:'rl', //翻动的方向rl:right to left 
          content:prize, //翻转后显示的内容即奖品 
          color:c, //背景色 
          onEnd: function(){ //翻转结束 
            p.css({"font-size":"22px","line-height":"100px"}); 
            p.attr("id","r"); //标记中奖方块的id 
            $("#viewother").show(); //显示查看其他按钮 
            $("#prize li").unbind('click') 
            .css("cursor","default").removeAttr("title"); 
          } 
        }); 
        $("#data").data("nolist",json.no); //保存未中奖信息 
      }); 
    }); 
  }); 
}); 

代码中先遍历6个方块,给每个方块初始化不同的背景颜色,单击当前方块后,使用$.getJSON向后台data.php发送ajax请求,请求成功后,调用flip插件实现翻转方块,在获取的中奖信息显示在翻转后的方块上,翻转结束后,标记该中奖方块id,同时冻结方块上的单击事件,即unbind('click'),目的就是让抽奖者只能抽一次,抽完后每个方块不能再翻动了。最后将未抽中的奖项信息通过data()储存在#data中。
其实到这一步抽奖工作已经完成,为了能查看其他方块背面究竟隐藏着什么,我们在抽奖后给出一个可以查看其他方块背面的链接。通过点击该链接,其他5个方块转动,将背面奖项信息显示出来。

$(function(){ 
  $("#viewother").click(function(){ 
    var mydata = $("#data").data("nolist"); //获取数据 
    var mydata2 = eval(mydata);//通过eval()函数可以将JSON转换成数组 
       
    $("#prize li").not($('#r')[0]).each(function(index){ 
      var pr = $(this); 
      pr.flip({ 
        direction:'bt', 
        color:'lightgrey', 
        content:mydata2[index], //奖品信息(未抽中) 
        onEnd:function(){ 
          pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
          $("#viewother").hide(); 
        } 
      }); 
    }); 
    $("#data").removeData("nolist"); 
  }); 
}); 

当单击#viewother时,获取抽奖时保存的未抽中的奖项数据,并将其转化为数组,翻转5个方块,将奖品信息显示在对应的方块中。最终效果图:

我想看完这篇文章后,大家或许就会知道电视节目中的翻板抽奖猫腻了,可能再不会参与了。

总之,希望大家可以从小编整理的这篇文章中有所收获,对大家学习php编程有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1062498.htmlTechArticlePHP+jQuery翻板抽奖功能实现,jquery鎶藉 翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个...
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
교통량이 많은 웹 사이트를위한 PHP 성능 튜닝교통량이 많은 웹 사이트를위한 PHP 성능 튜닝May 14, 2025 am 12:13 AM

thesecrettokeepingAphp-poweredwebsiterunningsmoothlydlyUnderHeavyloadInvolvesEveralKeyStrategies : 1) ubstractOpCodeCachingWithOpCacheTecescripteExecutionTime, 2) usedatabasequeryCachingwithRedSendatabaseload, 3) LeverAgeCdnslikeCloudforforporerververforporporpin

PHP의 종속성 주입 : 초보자를위한 코드 예제PHP의 종속성 주입 : 초보자를위한 코드 예제May 14, 2025 am 12:08 AM

Code는 코드가 더 명확하고 유지 관리하기 쉽기 때문에 의존성 주입 (DI)에 관심을 가져야합니다. 1) DI는 클래스를 분리하여 더 모듈 식으로 만들고, 2) 테스트 및 코드 유연성의 편의성을 향상시키고, 3) DI 컨테이너를 사용하여 복잡한 종속성을 관리하지만 성능 영향 및 순환 종속성에주의를 기울이십시오. 4) 모범 사례는 추상 인터페이스에 의존하여 느슨한 커플 링을 달성하는 것입니다.

PHP 성능 : 응용 프로그램을 최적화 할 수 있습니까?PHP 성능 : 응용 프로그램을 최적화 할 수 있습니까?May 14, 2025 am 12:04 AM

예, PPAPPLICATIONISPOSSIBLEADESLESTION.1) INVERECINGUSINGAPCUTERODUCEDABASELOAD.2) INCODINCEDEXING, ENGICIONEQUERIES 및 CONNECTIONPOULING.3) 향상된 보드 바이어링, 플로 팅 포르코 잉을 피하는 최적화 된 APPCUTERODECEDATABASELOAD.2)

PHP 성능 최적화 : 궁극적 인 가이드PHP 성능 최적화 : 궁극적 인 가이드May 14, 2025 am 12:02 AM

theKeyStrategiesToSINCINTIFILINTINTIFILINTINTHPPORMATIONPERFORMANCEARE : 1) USEOPCODECACHING-CCHACHETEDECUTECUTINGTIME, 2) 최적화 된 ABESINSTEMENTEMENDSTEMENTEMENDSENDSTATEMENTENDS 및 PROPERINDEXING, 3) ConfigureWebSerVERSLIKENGINXXWITHPMFORBETPERMERCORMANCES, 4)

PHP 의존성 주입 컨테이너 : 빠른 시작PHP 의존성 주입 컨테이너 : 빠른 시작May 13, 2025 am 12:11 AM

aphpdectionenceindectioncontainerisatoolthatmanagesclassdependencies, 향상 Codemodularity, testability 및 maintainability.itactAsacentralHubForCreatingAndingDinjectingDingingDingingdecting.

PHP의 종속성 주입 대 서비스 로케이터PHP의 종속성 주입 대 서비스 로케이터May 13, 2025 am 12:10 AM

대규모 응용 프로그램의 경우 SELLENCIONINGESS (DI)를 선택하십시오. ServicElocator는 소규모 프로젝트 또는 프로토 타입에 적합합니다. 1) DI는 생성자 주입을 통한 코드의 테스트 가능성과 모듈성을 향상시킵니다. 2) Servicelocator는 센터 등록을 통해 서비스를 얻습니다. 이는 편리하지만 코드 커플 링이 증가 할 수 있습니다.

PHP 성능 최적화 전략.PHP 성능 최적화 전략.May 13, 2025 am 12:06 AM

phPapplicationSCanBeoptimizedForsPeedandefficiencyby : 1) ENABLEOPCACHEINPHP.INI, 2) PREPAREDSTATEMENTSWITHPDOFORDATABASEQUERIES 사용

PHP 이메일 검증 : 이메일이 올바르게 전송되도록합니다PHP 이메일 검증 : 이메일이 올바르게 전송되도록합니다May 13, 2025 am 12:06 AM

phpeMailValidationInvoLvestHreesteps : 1) formatValidationUsingRegularexpressionsTochemailformat; 2) dnsValidationToErethedomainHasaValidMxRecord; 3) smtpvalidation, theSTHOROUGHMETHOD, theCheckSiftheCefTHECCECKSOCCONNECTERTETETETETETETWERTETWERTETWER

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.