PHP combiné avec jQuery pour implémenter la fonction de vote rouge et bleu effets spéciaux_jquery

Il s'agit d'un exemple de vote très pratique, appliqué dans un scénario de vote à deux points de vue. Les utilisateurs peuvent choisir de voter pour le parti qui représente leurs propres opinions.Cet article prend comme exemple le vote des partis rouge et bleu, grâce à l'interaction front-end et back-end, il affiche intuitivement le nombre et la proportion des votes exprimés. les partis rouges et bleus sont largement utilisés.

Cet article est un article complet sur l'application des connaissances, qui nécessite que vous ayez des connaissances de base en PHP, jQuery, MySQL, html et css. Cet article a apporté des améliorations appropriées sur la base de l'article « La fonction de vote « J'aime » et « Je n'aime pas » implémentée par PHP MySql jQuery » et partage le tableau de données. Vous pouvez d'abord cliquer pour en savoir plus sur cet article.

HTML

Nous devons afficher les opinions des partis rouges et bleus sur la page, ainsi que le nombre et la proportion de votes correspondants, ainsi que des images de mains pour l'interaction de vote. Dans cet exemple, #red et #blue représentent le. soirées rouges et bleues respectivement. .redhand et .bluehand sont utilisés pour créer des boutons de vote en forme de main, .redbar et .bluebar affichent la proportion de rouge et de bleu, et #red_num et #blue_num affichent le nombre de voix des deux partis.

 
<div class="vote"> 
  <div class="votetitle">您对脚本之家提供的文章的看法？</div> 
  <div class="votetxt">非常实用<span>完全看不懂</span></div> 
  <div class="red" id="red"> 
    <div class="redhand"></div> 
    <div class="redbar" id="red_bar"> 
      <span></span> 
      <p id="red_num"></p> 
    </div> 
  </div> 
  <div class="blue" id="blue"> 
    <div class="bluehand"></div> 
    <div class="bluebar" id="blue_bar"> 
      <span></span> 
      <p id="blue_num"></p> 
    </div> 
  </div> 
</div> 

CSS

Utilisez CSS pour embellir la page, charger des images d'arrière-plan, déterminer les positions relatives, etc. Vous pouvez directement copier le code suivant et apporter de légères modifications dans votre propre projet.

 
.vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} 
.votetitle{width:100%;height:62px; background:url(icon.png) no-repeat 0 30px; font-size:15px} 
.red{position:absolute; left:0; top:90px; height:80px;} 
.blue{position:absolute; right:0; top:90px; height:80px;} 
.votetxt{line-height:24px} 
.votetxt span{float:right} 
.redhand{position:absolute; left:0;width:36px; height:36px; background:url(icon.png) no-repeat -1px -38px;cursor:pointer} 
.bluehand{position:absolute; right:0;width:36px; height:36px; background:url(icon.png) no-repeat -41px -38px;cursor:pointer} 
.grayhand{width:34px; height:34px; background:url(icon.png) no-repeat -83px -38px;cursor:pointer} 
.redbar{position:absolute; left:42px; margin-top:8px;} 
.bluebar{position:absolute; right:42px; margin-top:8px; } 
.redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;} 
.bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0} 
.redbar p{line-height:20px; color:red;} 
.bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px} 

jQuery

Lorsque vous cliquez sur le bouton main, $.getJSON() de jQuery est utilisé pour envoyer une requête Ajax au php d'arrière-plan. Si la requête réussit, les données json renvoyées par l'arrière-plan seront obtenues et jQuery traitera le. données json. La fonction suivante : getdata(url,sid), transmet deux paramètres. L'URL est l'adresse PHP backend de la requête et sid représente l'ID du sujet de vote actuel. Dans cette fonction, les données json renvoyées incluent le nombre de votes des deux rouges. et les partis bleus, et le ratio des deux partis, calculent la largeur de la barre de proportion en fonction du ratio et affichent l'effet de vote de manière asynchrone et interactive.

 
function getdata(url,sid){ 
  $.getJSON(url,{id:sid},function(data){ 
    if(data.success==1){ 
      var w = 208; //定义比例条的总宽度 
      //红方投票数 
      $("#red_num").html(data.red); 
      $("#red").css("width",data.red_percent*100+"%"); 
      var red_bar_w = w*data.red_percent-10; 
      //红方比例条宽度 
      $("#red_bar").css("width",red_bar_w); 
      //蓝方投票数 
      $("#blue_num").html(data.blue); 
      $("#blue").css("width",data.blue_percent*100+"%"); 
      var blue_bar_w = w*data.blue_percent; 
      //蓝方比例条宽度 
      $("#blue_bar").css("width",blue_bar_w); 
    }else{ 
      alert(data.msg); 
    } 
  }); 
} 

Lorsque la page est chargée pour la première fois, getdata() est appelée, puis cliquez pour voter pour l'équipe rouge ou voter pour que l'équipe bleue appelle également getdata(), mais les paramètres transmis sont différents. Notez que le paramètre sid dans cet exemple est défini sur 1, qui est défini en fonction de l'identifiant dans la table de données. Les développeurs peuvent lire l'identifiant précis en fonction du projet réel.

 
$(function(){ 
  //获取初始数据 
  getdata("vote.php",1); 
  //红方投票 
  $(".redhand").click(function(){ 
    getdata("vote.php?action=red",1); 
  }); 
  //蓝方投票 
  $(".bluehand").click(function(){ 
    getdata("vote.php?action=blue",1); 
  }); 
}); 

PHP

Le front-end demande vote.php en arrière-plan, et vote.php se connectera à la base de données et appellera les fonctions associées en fonction des paramètres reçus.

 
include_once("connect.php"); 
 
$action = $_GET['action']; 
$id = intval($_GET['id']); 
$ip = get_client_ip();//获取ip 
 
if($action=='red'){//红方投票 
  vote(1,$id,$ip); 
}elseif($action=='blue'){//蓝方投票 
  vote(0,$id,$ip); 
}else{//默认返回初始数据 
  echo jsons($id); 
} 

La fonction vote($type,$id,$ip) est utilisée pour effectuer une action de vote. $type représente le parti votant, $id représente l'ID du sujet de vote et $ip représente l'adresse IP actuelle de l'utilisateur. Tout d'abord, en fonction de l'adresse IP actuelle de l'utilisateur, demandez si l'enregistrement IP actuel existe déjà dans la table des enregistrements de vote votes_ip. S'il existe, cela signifie que l'utilisateur a voté. Sinon, mettez à jour le nombre de votes pour le côté rouge ou le bleu. côté et écrivez l'enregistrement de vote de l'utilisateur actuel dans la table votes_ip pour éviter les votes répétés.

 
function vote($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_num_rows($ip_sql); 
  if($count==0){//还没有投票 
    if($type==1){//红方 
      $sql = "update votes set likes=likes+1 where id=".$id; 
    }else{//蓝方 
      $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
    } 
    mysql_query($sql); 
     
    $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')"; 
    mysql_query($sql_in); 
    if(mysql_insert_id()>0){ 
      echo jsons($id); 
    }else{ 
      $arr['success'] = 0; 
      $arr['msg'] = '操作失败，请重试'; 
      echo json_encode($arr); 
    } 
  }else{ 
    $arr['success'] = 0; 
    $arr['msg'] = '已经投票过了'; 
    echo json_encode($arr); 
  } 
} 

La fonction jsons($id) interroge le nombre de votes pour l'identifiant actuel, calcule la proportion et renvoie le format de données json pour l'appel frontal.

 
function jsons($id){ 
  $query = mysql_query("select * from votes where id=".$id); 
  $row = mysql_fetch_array($query); 
  $red = $row['likes']; 
  $blue = $row['unlikes']; 
  $arr['success']=1; 
  $arr['red'] = $red; 
  $arr['blue'] = $blue; 
  $red_percent = round($red/($red+$blue),3); 
  $arr['red_percent'] = $red_percent; 
  $arr['blue_percent'] = 1-$red_percent; 
   
  return json_encode($arr); 
} 

L'article implique également la fonction d'obtenir la véritable IP de l'utilisateur : get_client_ip() Cliquez ici pour voir le code correspondant : http://www.jb51.net/article/38940.htm<.>

MySQL

Enfin, collez la table de données Mysql. La table des votes est utilisée pour enregistrer le nombre total de votes des partis rouge et bleu, et la table votes_ip est utilisée pour stocker les enregistrements IP de vote de l'utilisateur.

CREATE TABLE IF NOT EXISTS `votes` ( 
 `id` int(10) NOT NULL AUTO_INCREMENT, 
 `likes` int(10) NOT NULL DEFAULT '0', 
 `unlikes` int(10) NOT NULL DEFAULT '0', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
 `id` int(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

Pour rappel, si la démo téléchargée ne peut pas s'exécuter, veuillez d'abord vérifier si la configuration de connexion à la base de données est correcte. Bon, arrête de dire quelques mots et viens voter :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.