PHP kombiniert mit jQuery, um die Rot- und Blau-Abstimmungsfunktion „special effects_jquery' zu implementieren-js-Tutorial-php.cn

Dies ist ein sehr praktisches Abstimmungsbeispiel, das in einem Zweiparteien-Abstimmungsszenario angewendet wird. Benutzer können für die Partei stimmen, die ihre eigenen Ansichten vertritt. In diesem Artikel wird die Abstimmung der roten und blauen Parteien anhand der Front-End- und Back-End-Interaktion intuitiv angezeigt Die roten und blauen Parteien sind weit verbreitet.

Bei diesem Artikel handelt es sich um einen umfassenden Wissensanwendungsartikel, der Grundkenntnisse in PHP, jQuery, MySQL, HTML und CSS erfordert. Dieser Artikel hat entsprechende Verbesserungen basierend auf dem Artikel „Die von PHP MySql jQuery implementierte Abstimmungsfunktion „Gefällt mir“ und „Gefällt mir nicht“ vorgenommen und die Datentabelle freigegeben. Sie können zuerst klicken, um mehr über diesen Artikel zu erfahren.

HTML

Wir müssen die Ansichten der roten und blauen Parteien auf der Seite anzeigen, sowie die entsprechende Anzahl und den Anteil der Stimmen, sowie Handbilder für die Abstimmungsinteraktion. In diesem Beispiel stellen #rot und #blau die dar rote bzw. blaue Parteien. Mit .redhand und .bluehand werden handförmige Abstimmungsschaltflächen erstellt, .redbar und .bluebar zeigen das Verhältnis von Rot und Blau an und #red_num und #blue_num zeigen die Anzahl der Stimmen beider Parteien.

 
<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>

Nach dem Login kopieren

CSS

Verwenden Sie CSS, um die Seite zu verschönern, Hintergrundbilder zu laden, relative Positionen zu bestimmen usw. Sie können den folgenden Code direkt kopieren und geringfügige Änderungen in Ihrem eigenen Projekt vornehmen.

 
.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}

Nach dem Login kopieren

jQuery

Wenn Sie auf die Handschaltfläche klicken, wird $.getJSON() von jQuery verwendet, um eine Ajax-Anfrage an das Hintergrund-PHP zu senden. Wenn die Anfrage erfolgreich ist, werden die vom Hintergrund zurückgegebenen JSON-Daten abgerufen und jQuery verarbeitet sie JSON-Daten. Die folgende Funktion: getdata(url,sid), übergibt zwei Parameter: URL ist die Backend-PHP-Adresse der Anfrage, und sid stellt die aktuelle Abstimmungsthemen-ID dar. In dieser Funktion enthalten die zurückgegebenen JSON-Daten die Anzahl der Stimmen von beiden und blaue Parteien sowie das Verhältnis beider Parteien, berechnen die Breite des Proportionalbalkens basierend auf dem Verhältnis und zeigen den Abstimmungseffekt asynchron interaktiv an.

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

Nach dem Login kopieren

Wenn die Seite zum ersten Mal geladen wird, wird getdata() aufgerufen. Klicken Sie dann, um für das rote Team zu stimmen, oder stimmen Sie für das blaue Team, um ebenfalls getdata() aufzurufen. Die übergebenen Parameter sind jedoch unterschiedlich. Beachten Sie, dass der Parameter Sid in diesem Beispiel auf 1 gesetzt ist, der auf der ID in der Datentabelle basiert. Entwickler können die genaue ID basierend auf dem tatsächlichen Projekt lesen.

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

Nach dem Login kopieren

PHP

Das Frontend fordert im Hintergrund vote.php an, und vote.php stellt eine Verbindung zur Datenbank her und ruft basierend auf den empfangenen Parametern verwandte Funktionen auf.

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

Nach dem Login kopieren

Die Funktion vote($type,$id,$ip) wird verwendet, um eine Abstimmungsaktion durchzuführen. $type repräsentiert die abstimmende Partei, $id repräsentiert die ID des Abstimmungsthemas und $ip repräsentiert die aktuelle IP des Benutzers. Fragen Sie zunächst anhand der aktuellen IP des Benutzers ab, ob der aktuelle IP-Datensatz bereits in der Abstimmungsdatensatztabelle „votes_ip“ vorhanden ist. Wenn er vorhanden ist, bedeutet dies, dass der Benutzer abgestimmt hat. Andernfalls aktualisieren Sie die Anzahl der Stimmen für die rote oder die blaue Seite Seite und schreiben Sie den aktuellen Abstimmungsdatensatz des Benutzers in die Tabelle votes_ip, um eine wiederholte Abstimmung zu verhindern.

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

Nach dem Login kopieren

Die Funktion jsons($id) fragt die Anzahl der Stimmen für die aktuelle ID ab, berechnet den Anteil und gibt das JSON-Datenformat für den Front-End-Aufruf zurück.

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

Nach dem Login kopieren

Der Artikel beinhaltet auch die Funktion zum Abrufen der echten IP des Benutzers: get_client_ip() Klicken Sie hier, um den relevanten Code anzuzeigen: http://www.jb51.net/article/38940.htm

MySQL

Fügen Sie abschließend die MySQL-Datentabelle ein. Die Abstimmungstabelle wird verwendet, um die Gesamtzahl der Stimmen sowohl der roten als auch der blauen Parteien aufzuzeichnen, und die Tabelle votes_ip wird zum Speichern der Abstimmungs-IP-Datensätze des Benutzers verwendet.

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;

Nach dem Login kopieren

Zur Erinnerung: Wenn die heruntergeladene Demo nicht ausgeführt werden kann, überprüfen Sie bitte zunächst, ob die Konfiguration der Datenbankverbindung korrekt ist. Okay, hören Sie auf, ein paar Worte zu sagen, und kommen Sie und stimmen Sie ab:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.