PHP+jQuery+MySql implementiert rote und blaue Abstimmungsbeispiele

Dieser Artikel stellt hauptsächlich PHP+jQuery+MySql vor, um Beispiele für rote und blaue Abstimmungen zu implementieren. Ich hoffe, dass er für alle hilfreich ist.

Lassen Sie mich Ihnen zuerst die Darstellungen zeigen:

HTML

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

<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

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 in Ihrem eigenen verwenden Projekt Ändern Sie es einfach.

.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

Wenn auf die Handschaltfläche geklickt wird, wird $.getJSON() von jQuery verwendet, um eine Ajax-Anfrage an die Hintergrund-PHP zu senden Der Hintergrund lautet: Die zurückgegebenen JSON-Daten werden von jQuery verarbeitet. 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 und Der Anteil beider Parteien, die Breite des Proportionsbalkens wird basierend auf dem Anteil berechnet und der Abstimmungseffekt wird interaktiv und asynchron angezeigt.

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

Wenn die Seite zum ersten Mal geladen wird, wird getdata() aufgerufen, und dann klicken Sie, um für das rote Team zu stimmen, oder für das blaue Team, um ebenfalls getdata() aufzurufen, aber die übergebenen Parameter sind anders. 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?action=red",1); 
 }); 
 //蓝方投票 
 $(".bluehand").click(function(){ 
 getdata("vote.php?action=blue",1); 
 }); 
});

PHP

Das Frontend fordert vote.php im Hintergrund an, stellt eine Verbindung zur Datenbank her und ruft verwandte Funktionen basierend auf den empfangenen Parametern 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); 
}

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

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

Der Artikel beinhaltet auch die Funktion, die echte IP des Benutzers zu erhalten: get_client_ip(), Klicken Sie hier, um den relevanten Code anzuzeigen: http://www.jb51.net/article/ 58610.htm

MySQL

Zuletzt fügen Sie die MySQL-Datentabelle hinzu. Die Stimmentabelle wird verwendet, um die Gesamtzahl der Stimmen sowohl der roten als auch der blauen Parteien aufzuzeichnen Die votes_ip-Tabelle 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;

PHP+MySql+jQuery implementiert die Abstimmungsfunktionen „Gefällt mir“ und „Gefällt mir nicht“

Dieser Artikel kombiniert Beispiele, um die Verwendung von PHP+MySql+jQuery zu erklären Implementieren Sie „Gefällt mir“ und „Gefällt mir nicht“. Die Abstimmungsfunktion zeichnet die IP des Benutzers auf, um festzustellen, ob das Abstimmungsverhalten des Benutzers gültig ist. Dieses Beispiel kann auch auf das Abstimmungssystem erweitert werden.

Zuerst platzieren wir die Schaltflächen „Gefällt mir“ und „Gefällt mir nicht“ auf der Seite, nämlich #dig_up und #dig_down. Die Anzahl der Stimmen und der Anteil der Stimmen werden erfasst die Schaltflächen Prozent.

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

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Verwandte Empfehlungen:

So aktualisieren Sie die MySQL-Version in phpStudy

PHP implementiert die Online-Rechnerfunktion

So implementieren Sie die asynchrone Ausführung von Skripten in PHP

Das obige ist der detaillierte Inhalt vonPHP+jQuery+MySql implementiert rote und blaue Abstimmungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!