PHP+jQuery+MySql implémente des exemples de vote rouge et bleu

Cet article présente principalement l'exemple de vote rouge et bleu implémenté par PHP+jQuery+MySql. Les amis intéressés peuvent s'y référer. J'espère que cela sera utile à tout le monde.

Laissez-moi d'abord vous montrer les rendus :

HTML

Nous devons afficher le rouge et le bleu côtés du point de vue de la page, ainsi que le nombre et la proportion de votes correspondants, ainsi que les images de mains utilisées pour l'interaction de vote. Dans cet exemple, #red et #blue représentent respectivement les côtés rouge et bleu. .redhand et .bluehand sont utilisés comme boutons de vote en forme de main. .redbar et .bluebar indiquent la proportion des côtés rouges et bleus. #red_num et #blue_num indiquent le nombre de votes des deux côtés.

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

CSS

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

.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 le bouton main est cliqué, $.getJSON() de jQuery est utilisé pour envoyer une requête Ajax au php d'arrière-plan si la requête. réussit, ce sera le cas. Après avoir obtenu les données json renvoyées en arrière-plan, jQuery traite les 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 la proportion des deux partis, la largeur de la barre de proportion est calculée en fonction de la proportion et l'effet de vote est affiché de manière interactive et asynchrone.

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 passés 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 du reçu paramètres.

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 des actions 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'obtention de la véritable adresse IP de l'utilisateur : get_client_ip(), Cliquez ici pour voir le code correspondant : http://www.jb51.net/ article/58610 .htm

MySQL

Enfin, collez le tableau de données Mysql Le tableau des votes est utilisé pour enregistrer le total des votes des partis rouge et bleu, et la table votes_ip est utilisée pour stocker les enregistrements IP 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;

PHP+MySql+jQuery implémente les fonctions de vote "j'aime" et "je n'aime pas"

Cet article combine des exemples pour expliquer les fonctions de vote "j'aime" et "j'aime" " Fonctions implémentées à l'aide de PHP+MySql+jQuery La fonction de vote "Je n'aime pas" enregistre l'adresse IP de l'utilisateur pour déterminer si le comportement de vote de l'utilisateur est valide. Cet exemple peut également être étendu au système de vote.

Nous plaçons d'abord les boutons "J'aime" et "Je n'aime pas" sur la page, à savoir #dig_up et #dig_down. Le nombre de votes et la proportion de votes sont enregistrés sur. les boutons respectivement.

<p class="digg"> 
 <p id="dig_up" class="digup"> 
 <span id="num_up"></span> 
 <p>很好，很强大！</p> 
 <p id="bar_up" class="bar"><span></span><i></i></p> 
 </p> 
 <p id="dig_down" class="digdown"> 
 <span id="num_down"></span> 
 <p>太差劲了！</p> 
 <p id="bar_down" class="bar"><span></span><i></i></p> 
 </p> 
 <p id="msg"></p> 
</p>
$(function(){ 
 //当鼠标悬浮和离开两个按钮时，切换按钮背景样式 
 $("#dig_up").hover(function(){ 
 $(this).addClass("digup_on"); 
 },function(){ 
 $(this).removeClass("digup_on"); 
 }); 
 $("#dig_down").hover(function(){ 
 $(this).addClass("digdown_on"); 
 },function(){ 
 $(this).removeClass("digdown_on"); 
 }); 
 //初始化数据 
 getdata("ajax.php",1); 
 //单击“顶”时 
 $("#dig_up").click(function(){ 
 getdata("ajax.php?action=like",1); 
 }); 
 //单击“踩”时 
 $("#dig_down").click(function(){ 
 getdata("ajax.php?action=unlike",1); 
 }); 
});

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Comment mettre à niveau la version MySQL dans phpStudy

PHP implémente la fonction de calculatrice en ligne

Comment implémenter l'exécution asynchrone de scripts en PHP

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!