模仿土豆网的等级评论功能
参考资料:
用css制作星级评分 http://www.blueidea.com/tech/web/2006/3624.asp
根据以上的文章,做了一点修改,最后的效果图:http://www.cn-cart.com/samples/rank/
闲话不多说,看代码
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> AJAX 评分功能 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<link href="styles.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" language="javascript" src="rank.js"></script>
</head>
<body>
<div id="result">给这个产品评分</div>
<ul class="star-rating">
<li><a href="#" title="没什么意思" class="one-star" οnclick="rank(1);" οnmοuseοver="tip(1);">1</a></li>
<li><a href="#" title="一般了" class="two-stars" οnclick="rank(2);" οnmοuseοver="tip(2);">2</a></li>
<li><a href="#" title="还不错" class="three-stars" οnclick="rank(3);" οnmοuseοver="tip(3);">3</a></li>
<li><a href="#" title="挺好的" class="four-stars" οnclick="rank(4);" οnmοuseοver="tip(4);">4</a></li>
<li><a href="#" title="很酷" class="five-stars" οnclick="rank(5);" οnmοuseοver="tip(5);">5</a></li>
</ul>
</body>
</html>
JS脚本文件rank.js
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function rank(rank) {
http.open('get', 'rank.php?rank='+rank);
http.onreadystatechange = handleResponse;
http.send(null);
}
function tip(rank) {
var tips = '';
switch(rank) {
case 1:
tips = '没什么意思';
break;
case 2:
tips = '一般了';
break;
case 3:
tips = '还不错';
break;
case 4:
tips = '挺好的';
break;
case 5:
tips = '很酷';
}
document.getElementById("result").innerHTML = tips;
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById("result").innerHTML = response;
}
}
document.getElementById("result").innerHTML = '给这个产品评分';
后台PHP文件rank.php
这里只有简单的显示一下,如果要实现你要的功能,可以另行完善。
<?php
$rank = $_REQUEST['rank'];
echo '你刚才打了 ' . $rank . ' 分';
?>
CSS样式表:styles.css
/* styles for the star rater */
body{
color:#916F06;
}
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 100px;
height: 20px;
position: relative;
background: url(images/star_rating.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*/*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:20px;
height: 20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(images/star_rating.gif) left bottom;
z-index: 1;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
.star-rating a.two-stars:hover{
width: 40px;
}
.star-rating a.three-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 40px;
}
.star-rating a.four-stars{
left: 60px;
}
.star-rating a.four-stars:hover{
width: 80px;
}
.star-rating a.five-stars{
left: 80px;
}
.star-rating a.five-stars:hover{
width: 100px;
}
#result{
width:560px;
font-family:"Times New Roman", Times, serif;
font-size:12px;
padding:5px 0 5px 15px;
border-left:3px #D5C180 solid;
background-color: #F8F4E9;
}
最后评分之后有一个问题没有解决,就是不会显示你刚才的评分。仍然是5个灰色的星号,谁有解决办法?