jQuery PHP kaedah pelaksanaan penarafan bintang

jQuery PHP kaedah pelaksanaan penarafan bintang_jquery

WBOY

Lepaskan： 2016-05-16 15:37:36

asal

1810 orang telah melayarinya

Kesan yang dicapai dalam contoh ini:

Animasi peralihan yang menunjukkan tindakan penilaian.
Kemas kini skor purata dan markah dinilai pengguna tepat pada masanya.
Latar belakang mengehadkan pengguna daripada mengulangi operasi penarafan dan memaparkannya tepat pada masanya di bahagian hadapan.
XHTML

<div class="rate"> 
  <div class="big_rate"> 
    <span rate="2"> </span> 
    <span rate="4"> </span> 
    <span rate="6"> </span> 
    <span rate="8"> </span> 
    <span rate="10"> </span> 
    <div style="width:45px;" class="big_rate_up"></div> 
  </div> 
  <p><span id="s" class="s"></span><span id="g" class="g"></span></p> 
  <div id="my_rate"></div> 
</div>

Salin selepas log masuk

Struktur HTML dibahagikan kepada div bintang kelabu#kadar_besar, div bintang terang#kadar_besar, span#s dan span#g dan maklumat segera div#my_rate.
CSS

.rate{width:600px; margin:100px auto; font-size:14px; position:relative; padding:10px 0;} 
.rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; 
top:0; left:100px; margin-left:140px;} 
.rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;} 
.rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;} 
.big_rate {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; 
display:inline-block; background:url(star.gif) left bottom repeat-x;} 
.big_rate span {display:inline-block; width:24px; height:28px; position:relative; z-index:1000; 
 cursor:pointer; overflow:hidden;} 
.big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0; 
 background:url(star.gif) left top;} 
#my_rate{ position:absolute; margin-top:40px; margin-left:100px} 
#my_rate span{color:#dd5400; font-weight:bold}

Salin selepas log masuk

jQuery
Mari mula-mula tulis fungsi get_rate() untuk mengendalikan interaksi pemarkahan bahagian hadapan.

function get_rate(rate){ 
  ....do some thing 
}

Salin selepas log masuk

Fungsi get_rate(rate) perlu melepasi parameter: rate, yang digunakan untuk mewakili skor purata. Seterusnya, kadar parameter mesti diproses dalam fungsi:

rate=rate.toString(); 
  var s; 
  var g; 
  $("#g").show(); 
  if (rate.length>=3){ 
    s=10;  
    g=0; 
    $("#g").hide(); 
  }else if(rate=="0"){ 
    s=0; 
    g=0; 
  }else{ 
    s=rate.substr(0,1); 
    g=rate.substr(1,1); 
  } 
  $("#s").text(s); 
  $("#g").text("."+ g);

Salin selepas log masuk

Tukar kadar skor purata ke dalam format seperti: 6.8, yang digunakan untuk memaparkan purata skor di bahagian hadapan.
Seterusnya, apabila kita meluncurkan tetikus ke arah bintang, kesan animasi akan dihasilkan Lebar bintang terang akan berubah apabila tetikus meluncur, dan nilai skor juga akan berubah dengan sewajarnya.

$(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000); 
$(".big_rate span").each(function(){ 
    $(this).mouseover(function(){ 
      $(".big_rate_up").width($(this).attr("rate") * 14 ); 
      $("#s").text($(this).attr("rate")); 
      $("#g").text(""); 
    }).click(function(){ 
      ...ajax异步提交给后台处理 
    }) 
})

Salin selepas log masuk

Kod di atas tidak sukar difahami Apa yang perlu dijelaskan ialah mengapa lebar perlu didarab dengan 14? Oleh kerana lebar gambar ialah 28, sejumlah 5 gambar mewakili skor penuh 10 mata Lebar pengiraan skor unit (1 mata) ialah (5*28)/10=14.
Apabila mengklik bintang, anda perlu menghantar permintaan ajax ke alamat latar belakang untuk berinteraksi dengan latar belakang.

var score = $(this).attr("rate"); 
$("#my_rate").html("您的评分：<span>"+score+"</span>"); 
  $.ajax({ 
     type: "POST", 
     url: "post.php", 
     data:"score="+score, 
     success: function(msg){ 
      if(msg==1){ 
        $("#my_rate").html("<span>您已经评过分了！</span>"); 
      }else if(msg==2){ 
        $("#my_rate").html("<span>您评过分了！</span>"); 
      }else{ 
        get_rate(msg); 
      } 
    } 
  });

Salin selepas log masuk

Tidak sukar untuk melihat bahawa apabila bintang diklik, bahagian hadapan menghantar permintaan ajax ke program latar belakang post.php dalam mod POST, melepasi skor parameter, iaitu skor. Selepas menentukan skor, program latar belakang melakukan pemprosesan yang sepadan dan menghantar maklumat pemprosesan yang berbeza ke bahagian hadapan berdasarkan hasil pemprosesan.
Dan jangan lupa, markah harus dipulihkan apabila tetikus meninggalkan bintang:

$(".big_rate").mouseout(function(){ 
  $("#s").text(s); 
  $("#g").text("."+ g); 
  $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14); 
})

Salin selepas log masuk

Fungsi get_rate() selesai, kita hanya perlu memanggilnya apabila halaman dimuatkan.

$(function(){ 
  get_rate(88); 
});

Salin selepas log masuk

PHP
Program post.php perlu memproses: menerima nilai skor yang dihantar oleh bahagian hadapan, menentukan IP pengguna dan masa pemarkahan melalui kuki, dan menghalang pemarkahan berulang.

include_once ('connect.php'); //连接数据库 
$score = $_POST['score']; 
if (isset ($score)) { 
  $cookiestr = getip(); 
  $time = time(); 
  if (isset ($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) { 
    echo "1"; 
  } 
  elseif (isset ($_COOKIE['rate_time']) && ($time -intval($_COOKIE['rate_time'])) < 600) { 
    echo "2"; 
  } else { 
    $query = mysql_query("update raty set voter=voter+1,total=total+'$score' where id=1"); 
    $query = mysql_query("select * from raty where id=1"); 
    $rs = mysql_fetch_array($query); 
    $aver = $rs['total'] / $rs['voter']; 
    $aver = round($aver, 1) * 10; 
    //设置COOKIE 
    setcookie("person", $cookiestr, time() + 3600); 
    setcookie("rate_time", time(), time() + 3600); 
    echo $aver; 
  } 
}

Salin selepas log masuk

Jelas sekali, apabila pengguna menyerahkan penilaian sekali, program akan merekodkan IP dan masa pengguna untuk mengelakkan penyerahan berulang Apabila pengguna menilai buat kali pertama, program menjalankan operasi, menambah nilai penilaian pada jadual data. dan mengira Skor purata dikembalikan kepada panggilan hujung hadapan.
Kaedah gettip() tentang cara mendapatkan IP pengguna sudah tersedia dalam DEMO Ia tidak akan diperkenalkan di sini. Sila muat turun sendiri.
Akhir sekali, lampirkan struktur jadual mysql:

CREATE TABLE IF NOT EXISTS `raty` ( 
 `id` int(11) NOT NULL auto_increment, 
 `voter` int(10) NOT NULL default '0' COMMENT '评分次数', 
 `total` int(11) NOT NULL default '0' COMMENT '总分', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Salin selepas log masuk

Di atas ialah kaedah pelaksanaan penarafan bintang PHP jQuery saya harap ia akan membantu pembelajaran semua orang.