PHP digabungkan dengan jQuery untuk melaksanakan fungsi undian merah dan biru special effects_jquery

Ini adalah contoh pengundian yang sangat praktikal, digunakan dalam senario pengundian sudut pandangan dua pihak. Pengguna boleh memilih untuk mengundi parti yang mewakili pandangan mereka sendiri Artikel ini mengambil undian parti merah dan biru sebagai contoh Melalui interaksi hadapan dan belakang, ia secara intuitif memaparkan bilangan dan perkadaran undian. pihak merah dan biru Ia digunakan secara meluas.

Artikel ini ialah artikel aplikasi pengetahuan yang komprehensif, yang memerlukan anda mempunyai pengetahuan asas tentang PHP, jQuery, MySQL, html dan css. Artikel ini telah membuat penambahbaikan yang sesuai berdasarkan artikel "Fungsi Pengundian "Suka" dan "Tidak Suka" yang Dilaksanakan oleh PHP MySql jQuery" dan berkongsi jadual data Anda boleh mengklik untuk mengetahui tentang artikel ini terlebih dahulu.

HTML

Kami perlu memaparkan pandangan parti merah dan biru pada halaman, serta bilangan dan perkadaran undian yang sepadan, serta gambar tangan untuk interaksi mengundi Dalam contoh ini, #merah dan #biru mewakili parti merah dan biru masing-masing. .redhand dan .bluehand digunakan untuk membuat butang mengundi berbentuk tangan, .redbar dan .bluebar menunjukkan perkadaran merah dan biru, dan #red_num dan #blue_num menunjukkan bilangan undian daripada kedua-dua parti.

 
<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

Gunakan CSS untuk mencantikkan halaman, memuatkan imej latar belakang, menentukan kedudukan relatif, dll. Anda boleh menyalin terus kod berikut dan membuat sedikit pengubahsuaian dalam projek anda sendiri.

 
.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

Apabila butang tangan diklik, $.getJSON() jQuery digunakan untuk menghantar permintaan Ajax ke php latar belakang Jika permintaan itu berjaya, data json yang dikembalikan oleh latar belakang akan diperolehi dan jQuery akan memproses data json. Fungsi berikut: getdata(url,sid), melepasi dua parameter URL ialah alamat PHP bahagian belakang permintaan, dan sid mewakili ID topik undian semasa Dalam fungsi ini, data json yang dikembalikan termasuk bilangan undian daripada kedua-dua merah dan parti biru, dan Nisbah kedua-dua parti, hitung lebar bar perkadaran berdasarkan nisbah, dan paparkan kesan undian secara tidak segerak secara interaktif.

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

Apabila halaman dimuatkan buat kali pertama, getdata() dipanggil, dan kemudian klik untuk mengundi pasukan merah atau undi pasukan biru untuk turut memanggil getdata(), tetapi parameter yang diluluskan adalah berbeza. Ambil perhatian bahawa parameter sid dalam contoh ini ditetapkan kepada 1, yang ditetapkan berdasarkan id dalam jadual data Pembangun boleh membaca id yang tepat berdasarkan projek sebenar.

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

PHP

Halaman hadapan meminta vote.php di latar belakang, dan vote.php akan menyambung ke pangkalan data dan memanggil fungsi berkaitan berdasarkan parameter yang diterima.

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

Fungsi undi($type,$id,$ip) digunakan untuk membuat tindakan mengundi $type mewakili parti mengundi, $id mewakili ID topik undian dan $ip mewakili IP semasa pengguna. Pertama, berdasarkan IP semasa pengguna, tanya sama ada rekod IP semasa sudah wujud dalam jadual undian votes_ip Jika wujud, ini bermakna pengguna telah mengundi Jika tidak, kemas kini bilangan undian untuk bahagian merah atau biru sebelah, dan tulis rekod pengundian pengguna semasa ke jadual votes_ip untuk mengelakkan pengundian berulang.

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

Fungsi jsons($id) menanyakan bilangan undian untuk id semasa, mengira perkadaran dan mengembalikan format data json untuk panggilan hadapan.

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

Artikel itu juga melibatkan fungsi mendapatkan IP sebenar pengguna: get_client_ip( Klik di sini untuk melihat kod yang berkaitan: http://www.jb51.net/article/38940.htm

MySQL

Akhir sekali, tampal jadual data Mysql Jadual undian digunakan untuk merekodkan jumlah undian daripada kedua-dua parti merah dan biru, dan jadual votes_ip digunakan untuk menyimpan rekod IP mengundi pengguna.

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; 

Sebagai peringatan, jika demo yang dimuat turun tidak dapat dijalankan, sila semak dahulu sama ada konfigurasi sambungan pangkalan data adalah betul. Okey, berhenti menyebut beberapa perkataan dan datang dan mengundi:

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.