데모 보기
복권을 뒤집는 과정: 홈페이지는 6 개의 정사각형을 제공하고, 숫자 1-6 으로 6 개의 다른 정사각형을 차례로 나타낸다. 복권 당첨자가 6 개의 사각형 중 하나를 클릭했을 때, 그 상자는 뒷면으로 돌아서서 복권 당첨 정보를 보여 주었다. 간단해 보이는 운영 절차로, 웹 기술에 대한 많은 지식이 포함되어 있으므로 이 문서의 독자들은 jQuery 와 PHP 에 익숙해야 합니다.
하이퍼텍스트 마크업 언어
이 사이트에서 jQuery+PHP+Mysql 로 경품 추첨을 하는 문장 한 편과는 달리, 경품 추첨은 시작 및 종료 버튼을 제공하지 않으며, 추첨자가 이들 중 하나를 선택해 경품 추첨을 완료하기로 결정했기 때문에, 우리는 페이지에 6 개의 정사각형을 올려놓고 1-6 으로 다른 정사각형을 표시했다.
& ltul id = "prize">
& lt 리 클래스 = "red" 제목 = "클릭 추첨" >1< /리>
& lt 리 클래스 = "그린" 제목 = "클릭 추첨" > 2</ 리>
& lt 리 클래스 = "블루" 제목 = "클릭 추첨" > 3</ 리>
& lt 리 class="purple" title= "클릭 추첨" > 4</ 리>
& lt 리 class="olive" title= "클릭 추첨" > 5</ 리>
& lt 리 클래스 = "브라운" 제목 = "클릭 추첨" > 6</ 리>
& lt/ul & gt；;
& ltdiv & gt & ltahref = "#" id = "view other"> 기타 열기
& & ltdiv id = "data">& lt/div & gt；;
Html 구조에서는 순서가 지정되지 않은 목록을 사용하여 6 개의 서로 다른 사각형을 배치합니다. 각 Li 의 clas 속성은 상자의 색상을 나타냅니다. 목록 아래에는 a#viewother 링크가 있습니다. 추첨을 마친 후 클릭하여 다른 사각형 뒷면에 있는 당첨 정보를 볼 수 있습니다. 기본적으로 숨겨져 있습니다. 다음은 div # 데이터입니다. 이 데이터는 비어 있습니다. 추첨되지 않은 다른 상에 대한 데이터를 임시로 보관하는 데 사용됩니다. 다음 코드를 참조하십시오. 6 개의 정사각형을 나란히 편안하게 보이게 하려면 CSS 로 미화해야 합니다. 자세한 내용은 demo 를 참고하고, CSS 코드는 이 글에서 붙이지 않습니다.
서버측 프로그래밍 언어 (professional hypertext preprocessor 의 약어)
먼저 백그라운드 PHP 프로세스를 완료하겠습니다. PHP 의 주요 업무는 경품과 그에 상응하는 당첨 확률을 구성하는 것이다. 첫 페이지에서 플립 상자를 클릭하면 Ajax 요청이 백그라운드 PHP 로 전송됩니다. 그런 다음 백그라운드 PHP 는 구성 확률에 따라 확률 알고리즘을 통해 당첨 결과를 제공하고 미당첨 당첨 정보를 JSON 데이터 형식으로 첫 페이지에 보냅니다.
확률 계산 함수를 먼저 살펴 보겠습니다.
함수 get_rand($proArr) {
$ result = \ "\";
//확률 배열의 총 확률 정확도
$ prosum = array _ sum ($ proarr);
//확률 배열 루프
Foreach ($ proarras $ key = > $ procur) {
$randNum = mt_rand( 1, $ prosum);
If($ rand num<；; = $proCur) {
$ result = $ key
깨뜨리다
} 그렇지 않으면 {
$ proSum-= $ proCur；;
}
}
Unset ($ proarr);
$ result 를 반환합니다
}
위의 코드는 고전적인 확률 알고리즘입니다. $proArr 는 사전 설정 배열입니다. 배열이 array (100,200,300,400) 라고 가정합니다. 첫 번째 숫자가 1, 1000 의 확률 범위 내에 있는지 먼저 필터링합니다. 그렇지 않다면, 그럴 것이다. 마지막으로, 항상 요구 사항을 충족하는 숫자가 있습니다. 상자 안의 물건을 만지는 것과 같다. 첫 번째는 아니고, 두 번째는 아니고, 세 번째는 아니고, 마지막은 확실히 그렇다. 이 알고리즘은 간단하고 매우 효과적입니다. 관건은 이 알고리즘이 이전 프로젝트에 적용되었다는 것입니다. 특히 데이터 양이 많은 프로젝트에서는 더욱 그렇습니다.
다음으로 PHP 를 통해 보상을 구성합니다.
$prize_arr = array (
0' => 배열 ('id' => 1,' 상' = & gtTablet',' v' =>/kloc-0-0
1'= >; 배열 ('id' =>2,' 경품' = > 디지털 카메라',' v' =>5),
2' = >; 배열 ('id' =>3,' 경품' = > 스피커 장비',' v' => 10),
3' = >; 배열 ('id' =>4,' 경품' = > 4Gu 디스크',' v' => 12),
4' = >; 배열 ('id' =>5,' 경품' = > 10 qun',' v' = & gt22),
5' = >; 배열 ('id' =>6,' 상' = > 아마 다음에 네가 이길 수 있을 거야,' v' = & gt50),
);
이번 복권에 대한 모든 당첨 정보를 기록한 2 차원 배열입니다. id 는 당첨 등급을 나타내고, prize 는 상금을 나타내고, V 는 당첨 확률을 나타냅니다. V 는 정수여야 합니다. 해당 상에 해당하는 V 를 0 으로 설정할 수 있습니다. 즉, 수상 확률은 0, 배열의 V 의 합 (radix) 을 나타냅니다. 기수가 클수록 확률이 더 정확하다. 이 예에서 V 의 합은 100 이므로 태블릿의 당첨 확률은 1% 입니다. V 의 합계가 10000 이면 당첨 확률은 만분의 1 이다.
첫 페이지가 요청될 때마다 PHP 순환상은 배열을 설정하고 확률 계산 함수 get_rand 를 통해 추출된 상 id 를 얻습니다. 당첨된 상품을 배열 $res['yes'] 에 보관하고, 당첨되지 않은 나머지 정보는 $res['no'] 에 보관하고, 마지막으로 JSON 번호 데이터를 홈페이지로 출력합니다.
Foreach ($ prize _ arras $ 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 & ltcount ($ prize _ arr); $i++){
$ pr [] = $ prize _ arr [$ I] ['prize'];
}
$ $ RES[' no ']= $ pr；;
Echo JSON _ encode ($ RES);
당첨 정보를 직접 출력하면 되는데 왜 당첨되지 않은 정보도 홈페이지에 출력해야 하나요? 뒤에 있는 프런트 엔드 코드를 보세요.
JQuery
첫째, 뒤집기 효과를 얻으려면 뒤집기 플러그인과 jquery, jqueryui 관련 플러그인을 미리 설치해야 합니다.
& lt script type = "text/JavaScript" src = "js/jquery-1.7.2.min.js" & & lt/스크립트 >
& lt script type = "text/JavaScript" src = "js/jquery-ui-1.7.2.custom .. & lt/스크립트 >
& lt scripttype = "text/JavaScript" src = "js/jquery.flip.min.js" > & lt/스크립트 >
홈페이지 http://lab.smashup.it/flip/. 에서 플립 플러그인에 대해 자세히 알아볼 수 있습니다
다음으로, 우리는 페이지의 상자를 클릭하여 추첨을 완성한다.
$(function(){
$ ("# 상 이"). Each(function(){
Var p = $ (이);
Var c = $ (이거). Attr ('클래스');
P.css ("배경색", c);
P.click(function(){
$ ("# 상 이"). 바인딩 해제 ("클릭");
$.getJSON("data.php ",function(json){
Var prize = json.yes// 경품 추첨.
페이지 넘기기 (
방향:' rl',//회전 방향 rl: 오른쪽에서 왼쪽으로.
내용: 경품,//뒤집기 후 표시되는 내용이 경품입니다.
색상: c,//배경색
OnEnd: function(){ // 뒤집기.
P.css({"font-size":"22px ","line-height ":"100px "});
P.attr("id ","r "); //당첨 상자의 id 를 표시합니다.
$("#viewother "). 쇼 (); //보기 기타 버튼 표시
$ ("# 상 이"). 바인딩 해제 ("클릭")
。 Css (커서, 기본값). Removeattr ("제목");
}
});
$("#data ") 입니다. Data("nolist ",json.no); //당첨 정보를 저장합니다.
});
});
});
});
코드에서 먼저 6 개의 사각형을 반복하고 각 사각형에 대해 다른 배경색을 초기화합니다. 현재 사각형을 클릭한 후 $.getJSON 을 사용하여 Ajax 요청을 백그라운드 data.php 에 보냅니다. 요청이 성공하면 플립 플러그인 플립 상자를 호출합니다. 뒤집기 후 당첨상자 id 를 표시하고, 네모난 클릭 이벤트인 unbind('click') 를 동결하여 추첨을 한 번만 할 수 있습니다. 마지막으로 선택하지 않은 경품 정보는 data () 를 통해 #data 에 저장됩니다.
사실, 이 단계에 나팔을 흔드는 것은 이미 완성되었다. 다른 네모난 뒷면에 무엇이 숨겨져 있는지 보기 위해 추첨을 한 후 다른 네모난 뒷면을 볼 수 있는 링크를 제공했다. 이 링크를 클릭하면 다른 다섯 개의 사각형이 회전하고 뒷면에 상품 정보가 표시됩니다.
$(function(){
$("#viewother "). (함수 () {를 클릭합니다
Var 마이데이터 = $ ("# data"). 데이터 ("nolist"); //데이터 가져오기
Var 마이데이터 2 = eval (마이데이터); //JSON 은 eval () 함수를 통해 배열로 변환할 수 있습니다.
$ ("# 상 이"). ($('#r')[0]) 이 아닙니다. 각 (함수 (인덱스) {
Var pr = $ (이);
Pr.flip({
방향:' Bt' ，
색상:' 연한 회색' ，
내용: 마이데이터 2 [인덱스],//경품 정보 (미추출)
OnEnd:function(){
Pr.css({"font-size":"22px ","line-height":" 100px ","color "
$("#viewother "). Hide ();
}
});
});
$("#data ") 입니다. Removedata ("nolist");
});
});
#viewother 를 클릭하면 복권에 저장된 당첨 데이터를 받아 배열로 변환하고 5 개의 사각형을 뒤집고 해당 사각형에 당첨 정보를 표시할 수 있습니다. 최종 렌더링도:
왜 내가 대상을 못 받았지?
많은 유사한 추첨 행사에서 참가자들은 왕왕 대상을 받을 수 없다. 절차 적 관점에서 예를 들어 보겠습니다. 만약 내가 추첨 행사의 주최자라면, 나는 6 개의 상을 설치했는데, 각 상은 서로 다른 당첨 확률을 가지고 있다. 1 등상이 리무진인데 당첨 확률을 0 으로 설정하면 무슨 뜻인가요? 이것은 추첨에 참여한 사람들이 아무리 피워도 이 리무진을 영원히 얻을 수 없다는 것을 의미한다. 주최자가 나머지 사각형을 한 번 뒤질 때마다 참가자들은 1 등상이 방금 뽑은 네모난 숫자 바로 아래에 있을 수 있다는 것을 알게 되며, 모두 자신이 운이 나쁘다고 탓할 수 있다. (윌리엄 셰익스피어, 햄릿, 행운명언) 정말 운이 나쁜가요? 실제로 참가자가 상자를 뒤집을 때, 프로그램은 이미 승리의 상품을 결정했지만, 다른 상자를 뒤집어 본 상품은 연기탄일 뿐 관객과 참가자들을 곤혹스럽게 했다. 이 문장 다 보고 싶은데, TV 프로그램에서 뒤집힌 복권이 느끼하다는 걸 알 수 있을 것 같아요. 다시는 복색공을 선택하지 않을 수도 있어요. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 스포츠명언)
버그 복구: 열심 있는 네티즌 한천과 눈물에 지속적으로 뒤집을 수 있는 버그의 피드백에 감사드립니다. 해결 방법은 Ajax 전에 클릭 이벤트 뒤에 코드를 삽입하는 click 이벤트를 제한하는 것입니다.
$ ("# 상 이"). 바인딩 해제 ("클릭");