Explication détaillée d'exemples de programmes de loterie utilisant jQuery, PHP et Mysql

Cet article présente principalement jQuery+PHP+Mysql pour implémenter le programme de loterie en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Les programmes de loterie sont largement utilisés dans la vie réelle. En raison des différents scénarios d'application, les méthodes de loterie sont également diverses. Cet article utilisera des exemples pour expliquer comment utiliser jQuery+PHP+MySQL pour implémenter un programme de loterie simple similaire à celui couramment vu à la télévision.

Voir la démo

Le programme de loterie dans cet exemple consiste à sélectionner au hasard un numéro à la fois parmi un un grand nombre de numéros de téléphone portable En tant que numéro gagnant, il peut être tiré plusieurs fois, et le numéro tiré ne sera plus tiré. Processus de loterie : après avoir cliqué sur le bouton "Démarrer", le programme obtient les informations sur le numéro et fait défiler pour afficher les numéros. Lorsque vous cliquez sur le bouton "Arrêter", les numéros arrêtent de défiler. Le numéro affiché à ce moment est le numéro gagnant. pouvez cliquer sur le bouton "Démarrer" pour continuer la loterie.

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>

Dans le code ci-dessus, nous avons besoin d'un #roll pour afficher le numéro de roulement, # mid est utilisé pour enregistrer l'ID du numéro tiré, puis deux boutons sont nécessaires pour "démarrer" et "arrêter" les actions respectivement. Enfin, un #result est nécessaire pour afficher le résultat du tirage.

CSS

Nous utilisons du CSS simple pour décorer la page 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}

Notez que nous avons défini le bouton #stop sur display:none par défaut afin que seul le bouton "Démarrer" soit affiché au début. Start", la loterie s'affichera. Pendant son déroulement, un bouton "Stop" s'affichera.

jQuery

La première chose que nous devons réaliser est de cliquer sur le bouton "Démarrer", d'obtenir les données de la loterie en arrière-plan via ajax, c'est-à-dire le numéro de téléphone mobile, puis utilisez le timing Faites défiler pour afficher les numéros de téléphone mobile. Notez que les numéros de téléphone mobile affichés à chaque fois sont aléatoires, c'est-à-dire qu'ils n'apparaissent pas dans un certain ordre. code suivant :

$(function(){ 
  var _gogo; 
  var start_btn = $("#start"); 
  var stop_btn = $("#stop"); 
   
  start_btn.click(function(){ 
    $.getJSON('data.php',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]['id']; //随机id 
          var v = obj[num]['mobile']; //对应的随机号码 
          $("#roll").html(v); 
          $("#mid").val(id); 
        },100); //每隔0.1秒执行一次 
        stop_btn.show(); 
        start_btn.hide(); 
      }else{ 
        $("#roll").html('系统找不到数据源，请先导入数据。'); 
      } 
    }); 
  }); 
});

Nous définissons d'abord des variables pour faciliter les appels ultérieurs. Ensuite, lorsque vous cliquez sur le bouton "Démarrer", la page envoie une requête Ajax au data.php en arrière-plan. Ici, nous utilisons getJSON de jqeury pour terminer la requête asynchrone. Lorsque l'arrière-plan renvoie des données json, nous pouvons convertir la chaîne JSON en objet obj via la fonction eval(), qui convertit en fait les données json en un tableau. À l'heure actuelle, nous utilisons setInterval pour créer un minuteur. Le travail à effectuer dans le minuteur consiste à obtenir aléatoirement les informations sur le numéro de téléphone portable dans le tableau obj, puis à les afficher sur la page. Exécutez ensuite la minuterie tous les 0,1, obtenant ainsi l'effet de faire défiler les numéros de loterie. En même temps, le bouton « Stop » est affiché et le bouton « Start » est masqué. A ce moment, la loterie est en cours.

L'étape suivante consiste à examiner le travail requis pour l'action "Stop".

  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(); 
    }); 
  });

Lorsque vous cliquez sur le bouton "Stop", cela signifie que la loterie est terminée. Utilisez la fonction clearInterval() pour arrêter le chronomètre, obtenir l'ID du numéro tiré, puis envoyer l'ID du numéro sélectionné au background data.php pour traitement via $.post. Le numéro qui doit être tiré doit être marqué dans la base de données. Si le traitement en arrière-plan réussit, le frontal ajoutera le numéro gagnant aux résultats gagnants, masquera le bouton « Stop » et affichera le bouton « Démarrer », et vous pourrez à nouveau dessiner.

Notez que nous utilisons setInterval() et clearInterval() pour régler la minuterie et arrêter la minuterie. Vous pouvez rechercher sur Google ou Baidu l'utilisation de ces deux fonctions.

PHP

data.php doit faire deux choses. Tout d'abord, lire les informations du numéro de téléphone portable en vous connectant à la base de données (sans compter les numéros gagnants). ), puis affichez-le sur le front-end en le convertissant au format json ; deuxièmement, en recevant la demande du front-end, modifiez le statut du numéro gagnant dans la base de données correspondante, ce qui signifie que le numéro a gagné le prix et ne sera pas ne sera plus utilisé comme numéro de loterie la prochaine fois.

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

Nous pouvons voir qu'il y a un champ appelé statut dans le membre de la table de données. Ce champ est utilisé pour identifier si le prix est gagné. 1 signifie que vous avez gagné le prix, 0 signifie que vous n'avez pas gagné le prix. Ce programme php en arrière-plan exploite la base de données puis renvoie les informations correspondantes au front-end.

MYSQL

Enfin, joignez les informations sur la structure de la table membre.

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

Concernant le programme de loterie, il y aura différentes formes d'expression selon les différents besoins des différentes applications. Nous aurons ensuite un article décrivant comment mettre en œuvre des procédures de loterie basées sur différentes probabilités.

Recommandations associées :

Exemples de programmes de loterie implémentés en PHP, jQuery et Mysql

Partage de code de mise en œuvre d'un programme de loterie simple JavaScript

programme de loterie de l'assemblée annuelle js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!