星级评分

xinghuihui 2011-01-14 05:15:39

我想做一个和淘宝一样的星级评分功能，我从网上搜到了相关的代码，关键是我不知道怎么获取他的参数存入数据库，让后读取分数的时候让它显示几颗星，呢，代码是

<!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">
<style type="text/css">
*{ margin:0; padding:0;}
.biaoti{ background:#fff; border:1px solid #999999; padding-top:2px;}
.neirong{ margin-top:3px;background:#fff; border:1px solid #999999; float:left; margin-left:6px;}
.pinglun{ background:url(images/pinglun.gif); width:70px; height:24px; margin:10px 0 0 50px;}
.clear{ clear:both;}


</style>

<body>
<div class="shop-rating">
<span class="title">给商品评分：</span>
<ul class="rating-level" id="stars1">
<li><a class="one-star" star:value="1" href="#"></a></li>
<li><a class="two-stars" star:value="2" href="#"></a></li>
<li><a class="three-stars"star:value="3" href="#"></a></li>
<li><a class="four-stars" star:value="4" href="#"></a></li>
<li><a class="five-stars" star:value="5" href="#"></a></li>
</ul>
<span class="result" id="stars1-tips"></span>
<input type="hidden" id="stars1-input" name="a" value=""/>
</div>


<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 )
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["1分","2分","3分","4分","5分"]})

</script>

</body> </html>

...全文

364 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ycproc 2011-01-14

打赏
举报

http://www.open-lib.com/Type/151-1.jsp

去下载一个

wuyq11 2011-01-14

打赏
举报

用AJAX 中星星的评分控件：<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<cc1:Rating ID="Rating1" runat="server" Enabled="true" CurrentRating="0"
MaxRating="10" CssClass="cssRatingStar" StarCssClass="ratingItem"
WaitingStarCssClass="Saved" FilledStarCssClass="Filled" EmptyStarCssClass="Empty"
AutoPostBack="true" onchanged="Rating1_Changed"">
</cc1:Rating>
http://topic.csdn.net/u/20100125/10/82948095-538c-4537-8f21-df3d6136c383.html