Tutoriel sur la fonction de vote rouge et bleu du développement PHP 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 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; //Définir la largeur totale de la barre de proportion
//Nombre de votes rouges
$("#red_num").html(data.red); "# red").css("width",data.red_percent*100+"%");
   var red_bar_w = w*data.red_percent-10;
                                                 " #red_bar").css("largeur ",red_bar_w);
                                                                                                                                                                      ").css("width",data.blue_percent*100+"%");
var blue_bar_w = w*data.blue_percent;
// Barre de proportion carrée bleue largeur
$("#blue_bar ").css ("largeur",blue_bar_w);

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(){
//Obtenir les données initiales
getdata("vote.php",1);
//Vote de l'équipe rouge
$( ".redhand").click(function(){
getdata("vote.php?action=red",1);
});
//Vote bleu
$(" . bluehand").click(function(){
getdata("vote.php?action=blue",1);
});
});

section suivante

nouveau fichier

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>红蓝投票功能</title>

 <style>
 #main{
 width: 600px;
 margin: 0 auto;
 border: 1px solid #050205;
 }
 .vote{
 width:358px;
 height:300px;
 margin:40px auto;
 position:relative
 }
 .votetitle{
 width:100%;
 height:62px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
 font-size:15px
 }
 .red{
 position:absolute;
 left:0; top:64px;
 height:80px;
 }
 .blue{position:absolute;
 right:0;
 top:64px;
 height:80px;
 }
 .red p,.blue p{
 line-height:22px
 }
 .redhand{
 position:absolute;
 left:0;
 width:36px;
 height:36px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
 cursor:pointer
 }
 .bluehand{
 position:absolute;
 right:0;
 width:36px;
 height:36px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -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: blue;
 width:100%;
 border-radius:4px;
 position:absolute;
 }
 .redbar p{
 line-height:20px;
 color:red;
 }
 .bluebar p{
 line-height:20px;
 color:#09f;
 text-align:right;
 margin-top:23px
 }
 </style>
 <script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
 getdata("vote.php",1);

 $(".redhand").click(function(){
 getdata("vote.php?action=red",1);
 });
 $(".bluehand").click(function(){
 getdata("vote.php?action=blue",1);
 });
 });

 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);
 }
 });
 }
 </script>

</head>


<body>
<div id="main">

 <h2>PHP+jQuery+MySql实现红蓝投票功能</h2>
 <hr/>

 <div class="vote">
 <div class="votetitle">您对PHP中文网提供的文章的看法？</div>
 <div class="red" id="red">
 <p id="hong">非常实用</p>
 <div class="redhand"></div>
 <div class="redbar" id="red_bar">
 <span></span>
 <p id="red_num"></p>
 </div>
 </div>
 <div class="blue" id="blue">

 <p id="bu">完全看不懂</p>
 <div class="bluehand"></div>
 <div class="bluebar" id="blue_bar">
 <span></span>
 <p id="blue_num"></p>
 </div>
 </div>
 </div>
</div>


</body>
</html>

soumettre Réinitialiser le code

Opération automatique

Plein écran

Aucun