jQuery PHP 별점 구현 method_jquery-JS 튜토리얼-php.cn

jQuery PHP 별점 구현 method_jquery

WBOY

풀어 주다： 2016-05-16 15:37:36

원래의

1791명이 탐색했습니다.

이 예에서 얻은 효과:

평가 작업을 보여주는 전환 애니메이션입니다.
적시에 평균 점수와 사용자 평가 점수를 업데이트합니다.
배경은 사용자가 평가 작업을 반복하는 것을 제한하고 이를 적시에 프런트 엔드에 표시합니다.
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>

로그인 후 복사

HTML 구조는 회색 별 div#big_rate, 밝은 별 div#big_rate_up, 점수span#s 및span#g와 프롬프트 정보 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}

로그인 후 복사

jQuery
먼저 스코어링의 프런트엔드 상호작용을 처리하는 함수 get_rate()를 작성해 보겠습니다.

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

로그인 후 복사

get_rate(rate) 함수는 평균 점수를 나타내는 데 사용되는 rate 매개변수를 전달해야 합니다. 다음으로 매개변수 비율은 함수에서 처리되어야 합니다.

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

로그인 후 복사

평균 점수 비율을 6.8과 같은 형식으로 변환합니다. 이는 프런트 엔드에 평균 점수를 표시하는 데 사용됩니다.
다음으로 별을 향해 마우스를 슬라이드하면 애니메이션 효과가 생성되며 마우스 슬라이드에 따라 밝은 별의 너비가 변경되고 그에 따라 점수 값도 변경됩니다.

$(".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异步提交给后台处理 
    }) 
})

로그인 후 복사

위 코드는 이해하기 어렵지 않습니다. 너비에 14를 곱해야 하는 이유는 무엇입니까? 그림의 너비가 28이므로 총 5장의 그림은 10점의 만점을 나타냅니다. 계산된 단위점수(1점)의 너비는 (5*28)/10=14입니다.
별표를 클릭하면 배경과 상호작용하기 위해 배경 주소로 ajax 요청을 보내야 합니다.

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

로그인 후 복사

별표를 클릭하면 프런트 엔드가 POST 모드에서 백그라운드 프로그램 post.php에 ajax 요청을 보내고 점수인 매개변수 점수를 전달하는 것을 보는 것은 어렵지 않습니다. 점수를 결정한 후 백그라운드 프로그램은 해당 처리를 수행하고 처리 결과에 따라 다른 처리 정보를 프런트 엔드에 보냅니다.
그리고 잊지 마세요. 마우스가 별을 떠나면 점수가 복원되어야 합니다.

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

로그인 후 복사

get_rate() 함수가 완료되었으므로 페이지가 로드될 때만 호출하면 됩니다.

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

로그인 후 복사

PHP
post.php 프로그램은 프런트 엔드에서 전송된 점수 값을 수신하고, 쿠키를 통해 사용자 IP 및 점수 시간을 확인하고, 반복 점수를 방지하는 작업을 수행해야 합니다.

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

로그인 후 복사

분명히 사용자가 등급을 한 번 제출하면 프로그램은 사용자의 IP와 시간을 기록하여 반복 제출을 방지합니다. 사용자가 처음으로 등급을 지정하면 프로그램이 작업을 수행하고 등급 값을 데이터 테이블에 추가합니다. 평균 점수가 프런트엔드 호출로 반환됩니다.
사용자의 IP를 얻는 방법에 대한 getip() 메소드는 이미 DEMO에서 제공됩니다. 여기서는 직접 다운로드하십시오.
마지막으로 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;

로그인 후 복사

위는 jQuery PHP 별점 구현 방법입니다. 모든 분들의 학습에 도움이 되길 바랍니다.