PHP와 jQuery를 결합하여 빨간색 및 파란색 투표 기능 특수 효과 구현_jquery

양당 관점 투표 시나리오에 적용된 매우 실용적인 투표 예시입니다. 사용자는 자신의 견해를 대표하는 정당에 투표할 수 있습니다. 이 기사에서는 프런트엔드와 백엔드 상호 작용을 통해 빨간색과 파란색 정당의 투표를 예로 들어 투표 수와 비율을 직관적으로 표시합니다. 빨간색과 파란색 파티가 널리 사용됩니다.

본 글은 PHP, jQuery, MySQL, html, css에 대한 기본 지식이 요구되는 종합 지식 응용 글입니다. 이 문서는 "PHP MySql jQuery로 구현된 "좋아요" 및 "싫어요" 투표 기능"을 기반으로 적절하게 개선되었으며, 클릭하여 이 문서에 대해 먼저 알아볼 수 있습니다.

HTML

페이지에 빨간색과 파란색 정당의 견해, 해당 투표 수와 비율, 그리고 투표 상호작용을 위한 손 사진을 표시해야 합니다. 이 예에서 #red와 #blue는 정당을 나타냅니다. 각각 빨간색과 파란색 파티. .redhand와 .bluehand는 손 모양의 투표 버튼을 만드는 데 사용되며, .redbar와 .bluebar는 빨간색과 파란색의 비율을 표시하고, #red_num과 #blue_num은 양측의 투표 수를 표시합니다.

 
<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

CSS를 사용하여 페이지를 아름답게 만들고, 배경 이미지를 로드하고, 상대 위치를 결정하는 등의 작업을 수행할 수 있습니다. 다음 코드를 직접 복사하여 자신의 프로젝트에서 약간의 수정을 가할 수 있습니다.

 
.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

손 버튼을 클릭하면 jQuery의 $.getJSON()을 사용하여 Ajax 요청을 백그라운드 PHP로 보냅니다. 요청이 성공하면 백그라운드에서 반환된 json 데이터를 가져오고 jQuery가 해당 요청을 처리합니다. JSON 데이터. 다음 함수: getdata(url,sid)는 두 개의 매개변수를 전달합니다. URL은 요청의 백엔드 PHP 주소이고 sid는 현재 투표 주제 ID를 나타냅니다. 이 함수에서 반환된 json 데이터에는 두 빨간색 모두의 투표 수가 포함됩니다. 파란색 정당과 양 정당의 비율을 기준으로 비율 막대의 너비를 계산하고 비동기적으로 대화식으로 투표 효과를 표시합니다.

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

페이지가 처음 로드되면 getdata()가 호출된 후 클릭하여 레드팀에 투표하거나 블루팀에 투표하여 getdata()도 호출하지만 전달되는 매개변수가 다릅니다. 이 예시에서는 sid 매개변수가 1로 설정되어 있으며, 이는 데이터 테이블의 id를 기준으로 설정됩니다. 개발자는 실제 프로젝트를 기준으로 정확한 id를 읽을 수 있습니다.

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

PHP

프런트 엔드는 백그라운드에서 vote.php를 요청하고 vote.php는 데이터베이스에 연결하여 수신된 매개변수를 기반으로 관련 기능을 호출합니다.

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

vote($type,$id,$ip) 함수는 투표 작업을 수행하는 데 사용됩니다. $type은 투표 당사자를 나타내고 $id는 투표 주제의 ID를 나타내며 $ip는 사용자의 현재 IP를 나타냅니다. 먼저 사용자의 현재 IP를 기반으로 현재 IP 기록이 vote_ip에 이미 존재하는지 쿼리합니다. 존재하는 경우 해당 사용자가 투표했다는 의미입니다. 그렇지 않으면 빨간색 면 또는 파란색에 대한 투표 수를 업데이트합니다. 현재 사용자 투표 기록을 vote_ip 테이블에 기록하여 반복 투표를 방지합니다.

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

jsons($id) 함수는 현재 ID에 대한 투표 수를 쿼리하고 비율을 계산하며 프런트 엔드 호출에 대한 json 데이터 형식을 반환합니다.

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

이 기사에는 사용자의 실제 IP를 얻는 기능도 포함되어 있습니다: get_client_ip() 관련 코드를 보려면 여기를 클릭하세요: http://www.jb51.net/article/38940.htm

MySQL

마지막으로 Mysql 데이터 테이블을 붙여넣으면 vote 테이블은 빨간색과 파란색 정당의 총 투표 수를 기록하는 데 사용되고 vote_ip 테이블은 사용자의 투표 IP 기록을 저장하는 데 사용됩니다.

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; 

다운로드한 데모가 실행되지 않을 경우 먼저 데이터베이스 연결 구성이 올바른지 확인하시기 바랍니다. 좋습니다. 이제 말 몇 마디 하지 말고 와서 투표하세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.