<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>Title</title><style type="text/css"><!--body {background:#fff;text-align:center;margin:0 auto;padding: 0;font:12px Arial;color:#000;line-height:1.2em}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}table,td,tr,th{font-size:12px;}/* 星级评分 */.shop-rating { height: 25px; overflow: hidden; zoom: 1; padding: 2px 0px; position: relative; z-index: 999;}.shop-rating span { height: 23px; display: block; line-height: 23px; float: left;}.shop-rating span.title { width: 125px; text-align: right; margin-right: 5px;}.shop-rating ul { float: left; margin:0;padding:0}.shop-rating .result { margin-left: 20px; padding-top: 2px;}.shop-rating .result span { color: #ff6d02;}.shop-rating .result em { color: #f60; font-family: arial; font-weight: bold;}.shop-rating .result strong { color: #666666; font-weight: normal;}.rating-level,.rating-level a { background: url(startpic/star_v2.png) no-repeat scroll 1000px 1000px;}.rating-level { background-position: 0px 0px; width: 120px; height: 23px; position: relative; z-index: 1000;}.rating-level li { display: inline;}.rating-level a { line-height: 23px; height: 23px; position: absolute; top: 0px; left: 0px; text-indent: -999em; *zoom: 1;}.rating-level a.one-star { width: 20%; z-index: 6;}.rating-level a.two-stars {width: 40%;z-index: 5;}.rating-level a.three-stars { width: 60%; z-index: 4;}.rating-level a.four-stars { width: 80%; z-index: 3;}.rating-level a.five-stars { width: 100%; z-index: 2;}.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}--></style></head><body><div class="shop-rating"> <span class="title">卖家服务的态度：</span> <ul class="rating-level" id="stars1"> <li><a class="one-star" star:value="1" href="#">1</a></li> <li><a class="two-stars" star:value="2" href="#">2</a></li> <li><a class="three-stars" star:value="3" href="#">3</a></li> <li><a class="four-stars" star:value="4" href="#">4</a></li> <li><a class="five-stars" star:value="5" href="#">5</a></li> </ul> <span class="result" id="stars1-tips"></span> <input type="hidden" id="stars1-input" name="b" value="" size="2" /></div><div class="shop-rating"> <span class="title">宝贝与描述相符：</span> <ul class="rating-level" id="stars2"> <li><a class="one-star" star:value="1" href="#">1</a></li> <li><a class="two-stars" star:value="2" href="#">2</a></li> <li><a class="three-stars" star:value="3" href="#">3</a></li> <li><a class="four-stars" star:value="4" href="#">4</a></li> <li><a class="five-stars" star:value="5" href="#">5</a></li> </ul> <span class="result" id="stars2-tips"></span> <input type="hidden" id="stars2-input" name="b" value="" size="2" /></div><div class="shop-rating"> <span class="title">卖家发货的速度：</span> <ul class="rating-level" id="stars3"> <li><a class="one-star" star:value="1" href="#">1</a></li> <li><a class="two-stars" star:value="2" href="#">2</a></li> <li><a class="three-stars" star:value="3" href="#">3</a></li> <li><a class="four-stars" star:value="4" href="#">4</a></li> <li><a class="five-stars" star:value="5" href="#">5</a></li> </ul> <span class="result" id="stars3-tips"></span> <input type="hidden" id="stars3-input" name="b" value="" size="2" /></div><div class="shop-rating"> <span class="title">物流公司的速度：</span> <ul class="rating-level" id="stars4"> <li><a class="one-star" star:value="1" href="#">1</a></li> <li><a class="two-stars" star:value="2" href="#">2</a></li> <li><a class="three-stars" star:value="3" href="#">3</a></li> <li><a class="four-stars" star:value="4" href="#">4</a></li> <li><a class="five-stars" star:value="5" href="#">5</a></li> </ul> <span class="result" id="stars4-tips"></span> <input type="hidden" id="stars4-input" name="b" value="" size="2" /></div><div class="shop-rating"> <span class="title">物流公司的服务：</span> <ul class="rating-level" id="stars5"> <li><a class="one-star" star:value="20" href="#">20</a></li> <li><a class="two-stars" star:value="40" href="#">40</a></li> <li><a class="three-stars" star:value="60" href="#">60</a></li> <li><a class="four-stars" star:value="80" href="#">80</a></li> <li><a class="five-stars" star:value="100" href="#">100</a></li> </ul> <span class="result" id="stars5-tips"></span> <input type="hidden" id="stars5-input" name="b" value="" size="2" /></div><!-- END 星级评分 --><input type="button" value="test" onclick="teststars()" /><script type="text/javascript">var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; }}function stopDefault( e ) { if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; } return false;} /** * 星星打分组件 * * @author Yunsd * @date 2010-7-5 */var Stars = Class.create();Stars.prototype = { initialize: function(star,options) { this.SetOptions(options); //默认属性 var flag = 999; //定义全局指针 var isIE = (document.all) ? true : false; //IE? var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表 var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果 var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示 var nowClass = " " + this.options.nowClass; // 定义选中星星样式名 var tipsTxt = this.options.tipsTxt; // 定义提示文案 var len = starlist.length; //星星数量 for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过 starlist[i].value = i; starlist[i].onclick = function(e){ stopDefault(e); this.className = this.className + nowClass; flag = this.value; input.value = this.getAttribute("star:value"); tips.innerHTML = tipsTxt[this.value] } starlist[i].onmouseover = function(){ if (flag< 999){ var reg = RegExp(nowClass,"g"); starlist[flag].className = starlist[flag].className.replace(reg,"") } } starlist[i].onmouseout = function(){ if (flag< 999){ starlist[flag].className = starlist[flag].className + nowClass; } } }; if (isIE){ //FIX IE下样式错误 var li = document.getElementById(star).getElementsByTagName('li'); for (var i = 0, len = li.length; i < len; i++) { var c = li[i]; if (c) { c.className = c.getElementsByTagName('a')[0].className; } } } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Input: "",//设置触保存分数的INPUT Tips: "",//设置提示文案容器 nowClass: "current-rating",//选中的样式名 tipsTxt: ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案 }; Extend(this.options, options || {}); }}/* For TEST */function teststars(){ alert('卖家服务的态度：'+document.getElementById("stars1-input").value+'分.\n宝贝与描述相符：'+document.getElementById("stars2-input").value+'分.\n卖家发货速度：'+document.getElementById("stars3-input").value+'分.\n物流公司速度：'+document.getElementById("stars4-input").value+'分.\n物流公司态度：'+document.getElementById("stars5-input").value+'分.');}var Stars1 = new Stars("stars1")var Stars2 = new Stars("stars2");var Stars2 = new Stars("stars3");var Stars2 = new Stars("stars4",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]});var Stars2 = new Stars("stars5");</script> </body></html>
PHP使用如下：
conn.php 链接数据库文件我就不写了。
<?php $sell=mysql_query("select * from sjpj where sjid='$_GET[id]'"); $dian=mysql_fetch_array($sell); $num=mysql_num_rows($sell); if($num==0){ $fen=0; $num=1; }else{ $sq="select sum(fen) from sjpj where sjid='$_GET[id]'"; $res=mysql_query($sq); $row1=mysql_fetch_row($res); $fen=$row1[0]; } $fen=$fen/$num;?>如果是多个的话可以直接加 sum()
显示html文件：
<img src="images/space000.gif" title="<?php echo round($fen,1);? alt="PHP评分系统" >分" class="star level<?php echo round($fen);?>" />
space000.gif（这个图片就是一个 1px的图片）：
css样式：
.star{ width:124px; height:27px; background: url(../images/stat.png) 0 0; cursor:pointer; position:relative;}.level0{background-position:-0px -0px;}.level1{background-position:0px -29px;}.level2{background-position:0px -58px;}.level3{background-position:0px -87px;}.level4{background-position:0px -116px;}.level5{background-position:0px -145px;}
