您好,登錄后才能下訂單哦!
這篇文章主要為大家詳細(xì)介紹了使用jQuery+PHP實(shí)現(xiàn)購物商城星級(jí)評(píng)分效果的方法,文中示例代碼介紹的非常詳細(xì),圖文詳解容易學(xué)習(xí),非常適合初學(xué)者入門,感興趣的小伙伴們可以參考一下。
首先我們在.rate里面加入顯示的灰星星p#big_rate、亮星星p#big_rate_up、分?jǐn)?shù)span#s及span#g和提示信息p#my_rate。
接著我們寫一個(gè)獲取評(píng)分的方法get_rate() :
function get_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); $(".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() { var score = $(this).attr("rate"); $("#my_rate").html("您的評(píng)分:<span>" + score + "</span>"); $.ajax({ type: "POST", url: "ajax.php", data: "score=" + score, success: function(msg) { //alert(msg); if (msg == 1) { $("#my_rate").html("<span>您已經(jīng)評(píng)過分了!</span>"); } else if (msg == 2) { $("#my_rate").html("<span>您評(píng)過分了!</span>"); } else { get_rate(msg); } } }); }) }) $(".big_rate").mouseout(function() { $("#s").text(s); $("#g").text("." + g); $(".big_rate_up").width((parseInt(s) + parseInt(g) / 10) * 14); }) }
然后直接調(diào)用該方法即可:
get_rate(<?php echo $aver; ?>);
ajax.php接收前端發(fā)送過來的分?jǐn)?shù)值,通過cookie判斷用戶IP和評(píng)分時(shí)間,防止重復(fù)評(píng)分。
$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'])) < 60) { 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 = 0; if ($rs) { $aver = $rs['total'] / $rs['voter']; $aver = round($aver, 1) * 10; } //設(shè)置COOKIE setcookie("person", $cookiestr, time() + 3600 * 365); setcookie("rate_time", time(), time() + 3600 * 365); echo $aver; } }
raty表結(jié)構(gòu):
CREATE TABLE IF NOT EXISTS `raty` ( `id` int(11) NOT NULL auto_increment, `voter` int(10) NOT NULL default '0' COMMENT '評(píng)分次數(shù)', `total` int(11) NOT NULL default '0' COMMENT '總分', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
最后記得在raty評(píng)分表里面加一條數(shù)據(jù)。
以上就是jQuery+PHP實(shí)現(xiàn)購物商城星級(jí)評(píng)分效果的詳細(xì)內(nèi)容了,看完之后是否有所收獲呢?如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。