집 > 기사 > 웹 프론트엔드 > jQuery, PHP, Mysql을 이용한 복권 프로그램 예시에 대한 자세한 설명

jQuery, PHP, Mysql을 이용한 복권 프로그램 예시에 대한 자세한 설명

小云云원래의: 2018-01-12 09:58:142213검색

이 글은 복권 프로그램을 구체적으로 구현하기 위해 주로 jQuery+PHP+Mysql을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

복권 프로그램은 다양한 적용 시나리오로 인해 복권 방법도 다양합니다. 이 기사에서는 예제를 사용하여 jQuery+PHP+MySQL을 사용하여 TV에서 흔히 볼 수 있는 것과 유사한 간단한 복권 프로그램을 구현하는 방법을 설명합니다.

데모 보기

이 예의 복권 프로그램은 다수의 휴대전화 번호 중 하나를 무작위로 당첨 번호로 선택하는 것이며, 당첨 번호는 여러 번 추첨될 수 있습니다. 중간에 다시 그려지지 않습니다. 복권 과정: "시작" 버튼을 클릭하면 프로그램이 번호 정보를 획득하고 스크롤하여 번호를 표시합니다. "중지" 버튼을 클릭하면 이때 표시되는 번호가 당첨 번호입니다. 추첨을 계속하려면 "시작" 버튼을 클릭하세요.

HTML

<p id="roll"></p><input type="hidden" id="mid" value=""> 
<p><input type="button" class="btn" id="start" value="开始"> 
<input type="button" class="btn" id="stop" value="停止"></p> 
<p id="result"></p>

위 코드에서 롤링 번호를 표시하려면 #roll이 필요하고, 추첨된 번호의 ID를 기록하려면 #mid가 필요하며, "시작"하려면 두 개의 버튼이 필요합니다. 및 "중지" 작업, 그리고 마지막으로 복권 결과를 표시하려면 #result가 필요합니다.

CSS

우리는 간단한 CSS를 사용하여 HTML 페이지를 장식합니다.

.demo{width:300px; margin:60px auto; text-align:center} 
#roll{height:32px; line-height:32px; font-size:24px; color:#f30} 
.btn{width:80px; height:26px; line-height:26px; background:url(btn_bg.gif) 
 repeat-x; border:1px solid #d3d3d3; cursor:pointer} 
#stop{display:none} 
#result{margin-top:20px; line-height:24px; font-size:16px; text-align:center}

기본적으로 #stop 버튼을 display:none으로 설정하여 처음에는 "시작" 버튼만 표시되도록 설정했습니다. "시작"을 클릭한 후 "중지" 버튼이 표시됩니다. 추첨이 진행 중입니다.

jQuery

가장 먼저 달성해야 할 일은 "시작" 버튼을 클릭하고 ajax, 즉 휴대폰 번호를 통해 백그라운드에서 복권에 대한 데이터를 가져온 다음 휴대폰을 표시하는 것입니다. 예약된 스크롤을 통해 표시되는 휴대폰 번호는 무작위입니다. 즉, 다음 코드를 살펴보겠습니다.

$(function(){ 
  var _gogo; 
  var start_btn = $("#start"); 
  var stop_btn = $("#stop"); 
   
  start_btn.click(function(){ 
    $.getJSON(&#39;data.php&#39;,function(json){ 
      if(json){ 
        var obj = eval(json);//将JSON字符串转化为对象 
        var len = obj.length; 
        _gogo = setInterval(function(){ 
          var num = Math.floor(Math.random()*len);//获取随机数 
          var id = obj[num][&#39;id&#39;]; //随机id 
          var v = obj[num][&#39;mobile&#39;]; //对应的随机号码 
          $("#roll").html(v); 
          $("#mid").val(id); 
        },100); //每隔0.1秒执行一次 
        stop_btn.show(); 
        start_btn.hide(); 
      }else{ 
        $("#roll").html(&#39;系统找不到数据源，请先导入数据。&#39;); 
      } 
    }); 
  }); 
});

먼저 변수를 정의합니다. 후속 통화를 용이하게 합니다. 그런 다음 "시작" 버튼을 클릭하면 페이지에서 Ajax 요청을 배경 data.php로 보냅니다. 여기서는 jqeury의 getJSON을 사용하여 비동기 요청을 완료합니다. 백그라운드에서 json 데이터가 반환되면 실제로 json 데이터를 배열로 변환하는 eval() 함수를 통해 JSON 문자열을 객체 obj로 변환할 수 있습니다. 이때 타이머를 만들기 위해 setInterval을 사용합니다. 타이머에서 해야 할 작업은 obj 배열에서 휴대폰 번호 정보를 무작위로 얻어서 페이지에 표시하는 것입니다. 그런 다음 0.1마다 타이머를 실행하여 복권 번호를 스크롤하는 효과를 얻습니다. 동시에 '중지' 버튼이 표시되고 '시작' 버튼은 숨겨집니다. 이때 추첨이 진행됩니다.

다음으로 '정지' 동작에 필요한 작업을 살펴보겠습니다.

  stop_btn.click(function(){ 
    clearInterval(_gogo); 
    var mid = $("#mid").val(); 
    $.post("data.php?action=ok",{id:mid},function(msg){ 
      if(msg==1){ 
        var mobile = $("#roll").html(); 
        $("#result").append("<p>"+mobile+"</p>"); 
      } 
      stop_btn.hide(); 
      start_btn.show(); 
    }); 
  });

"중지" 버튼을 클릭하시면 추첨이 종료되었음을 의미합니다. 타이머를 중지하고 추첨된 숫자의 ID를 얻은 다음 $.post를 통해 처리하기 위해 선택된 숫자의 ID를 배경 data.php로 전송하려면clearInterval() 함수를 사용하십시오. 추첨되어야 할 번호는 데이터베이스에 표시되어야 합니다. 백그라운드 처리가 성공하면 프런트 엔드에서 당첨 결과에 당첨 번호를 추가하고 "정지" 버튼을 숨기고 "시작" 버튼을 표시하여 다시 추첨할 수 있습니다.

타이머를 설정하고 중지하기 위해 setInterval() 및clearInterval()을 사용합니다. 이 두 기능의 사용에 대해서는 Google 또는 Baidu에서 검색할 수 있습니다.

PHP

data.php는 먼저 데이터베이스에 연결하여 휴대폰 번호 정보(당첨번호 제외)를 읽어온 후 json 형식으로 변환하여 출력합니다. 두 번째, 프런트 엔드 요청을 수신하고 해당 데이터베이스에서 당첨 번호 상태를 수정합니다. 이는 해당 번호가 경품에 당첨되었으며 다음 번에는 더 이상 복권 번호로 사용되지 않음을 의미합니다.

include_once(&#39;connect.php&#39;); //连接数据库 
 
$action = $_GET[&#39;action&#39;]; 
if($action==""){ //读取数据，返回json 
  $query = mysql_query("select * from member where status=0"); 
    while($row=mysql_fetch_array($query)){ 
    $arr[] = array( 
      &#39;id&#39; => $row[&#39;id&#39;], 
      &#39;mobile&#39; => substr($row[&#39;mobile&#39;],0,3)."****".substr($row[&#39;mobile&#39;],-4,4) 
    ); 
  } 
  echo json_encode($arr); 
}else{ //标识中奖号码 
  $id = $_POST[&#39;id&#39;]; 
  $sql = "update member set status=1 where id=$id"; 
  $query = mysql_query($sql); 
  if($query){ 
    echo &#39;1&#39;; 
  } 
}

데이터 테이블 멤버에 status라는 필드가 있는 것을 볼 수 있습니다. 이 필드는 당첨 여부를 식별하는 데 사용됩니다. 1은 상을 받았음을 의미하고, 0은 상을 받지 못했음을 의미합니다. 이 백그라운드 PHP 프로그램은 데이터베이스를 운영한 후 해당 정보를 프런트엔드로 반환합니다.

MYSQL

마지막으로 멤버 테이블 구조 정보를 첨부합니다.

CREATE TABLE `member` ( 
 `id` int(11) NOT NULL auto_increment, 
 `mobile` varchar(20) NOT NULL, 
 `status` tinyint(1) NOT NULL default &#39;0&#39;, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

복권 프로그램과 관련하여 다양한 응용 프로그램의 다양한 요구에 따라 다양한 표현 형식이 있습니다. 다음으로 다양한 확률에 따라 복권 프로그램을 구현하는 방법을 설명하는 기사를 다루겠습니다.

jQuery, PHP, Mysql을 이용한 복권 프로그램 예시에 대한 자세한 설명

관련 기사