=波波日志 > JavaScript/Ajax > 本站点中软件推荐的Js效果=
本站点中软件推荐的Js效果
ajax类库去下面的这个连接中下载。
自己写的ajax程序池
数据库设计很简单,就用一个字段存储score,记录1-5星投票的人数,用“|”分隔开。循序为5星|4星|3星|2星|1星
注意:这个字段的默认值要设置为“0|0|0|0|0”
下面给出动态页更新的方法C#方法
+展开
-C#
private void Update()
{
string Id = Request.Form["id"], star = Request.Form["star"];
if (UserCheck.IsInt(Id))//因为提交到同一个页面,所以判断下是浏览还是ajax提交
{//UserCheck.IsInt就是一个判断字符串是否为数字的函数,这里不贴出来了
string msg = "";
int s = 5;
if (!UserCheck.IsInt(star)) msg += "{success:false,err:'星级为数字!'}";
else {
s = int.Parse(star);
if (s > 5 || s < 1) msg += "{success:false,err:'星级为1-5的数字!'}";
}
if (msg == "")
{
s = 5 - s;//注意这里循序是从5-1,所以要处理下
//==============使用自己的dbhelper类获取
DBHelper db = new DBHelper();
object ss = DBHelper.ExecScalar("select 存储分数的字段 from 表 where 唯一id字段=" + Id,db.CN);
//===============
if (ss == null) msg = "{success:false,err:'要评分的软件不存在!'}";
else
{
string[] arr = ss.ToString().Split('|');
for (int i = 0; i < 5; i++) if (i == s) { arr[i] = (int.Parse(arr[i]) + 1).ToString(); break; }//遍历分数数组更新对应的人数
string UpStar = arr[0] + "|" + arr[1] + "|" + arr[2] + "|" + arr[3] + "|" + arr[4];//转换为字符串
DBHelper.ExecNoNQuery("update 表 set 存储分数的字段='" + UpStar + "' where 唯一id字段=" + Id, db.CN);//更新
msg = "{success:true}";
}
db.CloseDB();
}
Response.Write(msg);
Response.End();
}
}
{
string Id = Request.Form["id"], star = Request.Form["star"];
if (UserCheck.IsInt(Id))//因为提交到同一个页面,所以判断下是浏览还是ajax提交
{//UserCheck.IsInt就是一个判断字符串是否为数字的函数,这里不贴出来了
string msg = "";
int s = 5;
if (!UserCheck.IsInt(star)) msg += "{success:false,err:'星级为数字!'}";
else {
s = int.Parse(star);
if (s > 5 || s < 1) msg += "{success:false,err:'星级为1-5的数字!'}";
}
if (msg == "")
{
s = 5 - s;//注意这里循序是从5-1,所以要处理下
//==============使用自己的dbhelper类获取
DBHelper db = new DBHelper();
object ss = DBHelper.ExecScalar("select 存储分数的字段 from 表 where 唯一id字段=" + Id,db.CN);
//===============
if (ss == null) msg = "{success:false,err:'要评分的软件不存在!'}";
else
{
string[] arr = ss.ToString().Split('|');
for (int i = 0; i < 5; i++) if (i == s) { arr[i] = (int.Parse(arr[i]) + 1).ToString(); break; }//遍历分数数组更新对应的人数
string UpStar = arr[0] + "|" + arr[1] + "|" + arr[2] + "|" + arr[3] + "|" + arr[4];//转换为字符串
DBHelper.ExecNoNQuery("update 表 set 存储分数的字段='" + UpStar + "' where 唯一id字段=" + Id, db.CN);//更新
msg = "{success:true}";
}
db.CloseDB();
}
Response.Write(msg);
Response.End();
}
}
下面这个是asp版本的update.asp
+展开
-VBScript
Id = Request.Form("id")&"":star = Request.Form("star")&""
if isnumeric(id) then'sql注入判断
if not isnumeric(star) then
response.write "{success:false,err:'星级为数字!'}"
else
s=cint(star)
if s>5 or s<1 then
response.write "{success:false,err:'星级为1-5的数字!'}"
else
s = 5 - s'注意这里循序是从5-1,所以要处理下
set cn=server.createobject("adodb.connection")
cn.open "驱动字符串"
set rs=server.createobject("adodb.recordset")
rs.open "select 存储分数的字段 from 表 where 唯一id字段=" & Id,cn,1,3
if rs.eof or rs.bof then
response.write "要评分的软件不存在!"
else
arr=split(rs(0),"|")
for i = 0 to 4'遍历分数数组更新对应的人数
if i=s then
arr(i)= cint(arr(i)) + 1):exit for
end if
next
rs(0)=arr(0)&"|"&arr(1)&"|"&arr(2)&"|"&arr(3)&"|"&arr(4)
rs.update
response.write "{success:true}"
end if
rs.close:set rs=nothing:cn.close:set cn=nothing
end if
end if
else
response.write "{success:false,err:'要评论的软件Id为数字!'}"
end if
if isnumeric(id) then'sql注入判断
if not isnumeric(star) then
response.write "{success:false,err:'星级为数字!'}"
else
s=cint(star)
if s>5 or s<1 then
response.write "{success:false,err:'星级为1-5的数字!'}"
else
s = 5 - s'注意这里循序是从5-1,所以要处理下
set cn=server.createobject("adodb.connection")
cn.open "驱动字符串"
set rs=server.createobject("adodb.recordset")
rs.open "select 存储分数的字段 from 表 where 唯一id字段=" & Id,cn,1,3
if rs.eof or rs.bof then
response.write "要评分的软件不存在!"
else
arr=split(rs(0),"|")
for i = 0 to 4'遍历分数数组更新对应的人数
if i=s then
arr(i)= cint(arr(i)) + 1):exit for
end if
next
rs(0)=arr(0)&"|"&arr(1)&"|"&arr(2)&"|"&arr(3)&"|"&arr(4)
rs.update
response.write "{success:true}"
end if
rs.close:set rs=nothing:cn.close:set cn=nothing
end if
end if
else
response.write "{success:false,err:'要评论的软件Id为数字!'}"
end if
下面是score.js文件中的内容,上面一些函数是从别的文件提取出来的。
+展开
-JavaScript
var Showbo={version:'1.0',author:'showbo',intro:'通用',homePage:'http://www.code-design.cn'};
//获取文件名称,以便生成唯一cookie用的,如果文件名不符合下面的正则,注意要修改过正则表达式
Showbo.getFN=function(){var m=/\/([a-z]+\d*)(?=\.(html|aspx))/i.exec(window.location.href.replace(/(?=[\?|#]).*/,''));if(m)return m[1];else return '';}
//带小数位的舍入
Showbo.round=function(num,radixNum){var t=Math.pow(10,radixNum);return Math.round(num*Math.pow(10,radixNum))/t;}
//从字符串中还原为json对象
Showbo.GetJson=function(v){ return eval("(" + v + ')');}
//空函数
Showbo.emptyFN=function(){}
//获取某个对象的绝对位置
Showbo.getAbsPos=function(o,addXY){o=Showbo.$(o);var p=new Object();p.x=o.offsetLeft;p.y=o.offsetTop;while(o=o.offsetParent){p.x+=o.offsetLeft;p.y+=o.offsetTop;}if(addXY){if(!isNaN(addXY.x))p.x+=addXY.x;if(!isNaN(addXY.y))p.y+=addXY.y;}return p;}
//按id获取对象
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}
//按标签名称获取对象
Showbo.$s=function(){var o,tag;if(arguments.length==1){o=document;tag=arguments[0];}else{o=arguments[0];tag=arguments[1];}return o.getElementsByTagName(tag);}
//设置cookie
Showbo.SetCookie=function(name,value,icfgTime){var cfgTime={};if("undefined"==typeof(icfgTime))cfgTime.y=1;else cfgTime=icfgTime; var d=new Date();if(Showbo.IsNumeric(cfgTime.y))d.setFullYear(d.getFullYear()+cfgTime.y);if(Showbo.IsNumeric(cfgTime.M))d.setMonth(d.getMonth()+cfgTime.M);if(Showbo.IsNumeric(cfgTime.d))d.setDate(d.getDate()+cfgTime.d);if(Showbo.IsNumeric(cfgTime.h))d.setHours(d.getHours()+cfgTime.h);if(Showbo.IsNumeric(cfgTime.m))d.setMinutes(d.getMinutes()+cfgTime.m);if(Showbo.IsNumeric(cfgTime.s))d.setSeconds(d.getSeconds()+cfgTime.s);document.cookie=name+"="+value+";expires="+d.toGMTString();}
//获取cookie
Showbo.GetCookie=function(name){var m=new RegExp(name+'=([^;]+)','i').exec(document.cookie);if(m)return unescape(m[1]);return "";}
//如果非ie浏览器,扩充原属的contains方法
if(!Showbo.IsIE&&window.Element)Element.prototype.contains=function(o){if(this==o)return true;while(o=o.parentNode)if(o==this)return true;return false;}
//============================推荐部分
Showbo.Score={
version:1.0,
author:'showbo',
cfgStars:null,
//==========定义图片路径
starRed:'images/star_red.gif',
starGray:'images/star_gray.gif',
starHalf:'images/star_half.gif',
//==========
total:0,
totalScore:0,
stars:null,
fn:Showbo.getFN(),//获取文件名,注意要修改Show.getFN对应的正则,如果你的文件名和我的不一样的话,要不下面获取id会出错
fid:function(){return /\d+/.exec(this.fn);},//获取当前下载的文件的对应Id
//==============评分代码
reset:function(e,o){
var s=parseInt(o.getAttribute('star'),10);
if(e){
var toObj=e.toElement||e.relatedTarget;
if(toObj==o.nextSibling)o.nextSibling.src=Showbo.Score.starRed;
else if(toObj==o.previousSibling)o.src=Showbo.Score.starRed;
else for(var i=0;i<5;i++)Showbo.Score.stars[i].src=Showbo.Score.starGray;
}
else{
for(var i=0;i<s;i++)Showbo.Score.stars[i].src=Showbo.Score.starRed;
for(var i=s;i<5;i++)Showbo.Score.stars[i].src=Showbo.Score.starGray;
}
},
click:function(o){
var p=o.parentNode,score=parseInt(o.getAttribute('star'),10),me=this;
p.style.display='none';
p.nextSibling.style.display='block';
function ajaxHandle(xhr){//ajax回调函数
var json=xhr.status==200?Showbo.GetJson(xhr.responseText):{success:false,err:'评分出错,请联系管理员!'};
if(json.success){
me.reset(null,o);
p.style.display='block';
p.nextSibling.style.display='none';
p.innerHTML='您的评分为'+p.innerHTML.substring(5);
for(var i=0;i<me.stars.length;i++) me.stars[i].onclick= me.stars[i].onmouseover= me.stars[i].onmouseout=Showbo.emptyFN;
me.update(score);
Showbo.SetCookie(me.fn,score);
}else alert(json.err);
}
//调用ajax方法更新评分,如果你的评分动态页面试其他的,修改这里!!!!!!!!!!!!!!!!!
Showbo.Ajax.send({url:'codedown.aspx',method:'post',params:'id='+this.fid()+'&star='+score,success:ajaxHandle,failure:ajaxHandle});
},
//=============详细信息
starDTout:function(e){
e=e||event;
var o=e.toElement||e.relatedTarget,obj=Showbo.$('starDetails');
if(!o||!obj.contains(o))obj.style.display='none';//兼容ff,上面扩充了contains方法
},
init:function(star){
if("undefined"==typeof(star))star='';
this.cfgStars=star.split('|');
for(var i=0;i<this.cfgStars.length;i++)
if(!Showbo.IsNumeric(this.cfgStars[i]))this.cfgStars[i]=0;
else{
this.cfgStars[i]=parseInt(this.cfgStars[i]);
this.totalScore+=this.cfgStars[i]*(5-i);
}
while(this.cfgStars.length<5)this.cfgStars.push(0);
this.total=eval(this.cfgStars.join('+'));
},
initStar:function(container){
var total=this.total,p=Showbo.getAbsPos('imgShowbo.Star',{x:-265,y:12}),arrPT=new Array();
for(var i=0;i<5;i++)arrPT.push(Math.round((this.cfgStars[i]/total)*100)+'%');
var html='<div class="top">评分详情(<span id="spStarTotal">'+total+'</span>人)<img src="images/close.gif" alt="关闭" onclick="this.parentNode.parentNode.style.display=\'none\'"/></div>'+
'<div class="dt"><ul>';
for(var i=0;i<5;i++){
html+='<li><span class="star">';
for(var j=i;j<5;j++)html+='<img src="'+this.starRed+'" alt=""/>';
for(var j=5-i;j<5;j++)html+='<img src="'+this.starGray+'" alt=""/>';
html+='</span><span class="picnum"><img src="images/startiao.gif" id="imgStarPN'+i+'" width="'+arrPT[i]+'"/></span><span class="num" id="spStarN'+i+'">'+this.cfgStars[i]+'人</span></li>';
}
html+="</ul>";
var ckstar=0;
//通过文件名获取cookie判断是否评过分
if(this.fn){ckstar=Showbo.GetCookie(this.fn);if(Showbo.IsNumeric(ckstar))ckstar=parseInt(ckstar);else ckstar=0;}
html+="<div id='giveScore'><span>"+(ckstar==0?'请给出':'您的')+"评分"+(ckstar==0?'':'为')+":"
if(ckstar==0){
for(var i=0;i<5;i++)
html+='<img src="'+this.starGray+'" title="'+(i+1)+'星" onmouseout="Showbo.Score.reset(event,this)" star="'
+(i+1)+'" onclick="Showbo.Score.click(this)" onmouseover="Showbo.Score.reset(null,this)"/>';
html+="</span><span style='display:none;'>正在更新,请等待...</span></div>";
}else{
for(var i=0;i<ckstar;i++)html+='<img src="'+this.starRed+'"/>';
for(var i=ckstar;i<5;i++)html+='<img src="'+this.starGray+'"/>';
}
html+="</div>";
var div=document.createElement("div");
div.style.left=p.x+"px";
div.style.top=p.y+"px";
div.id="starDetails";
div.onmouseout=function(e){Showbo.Score.starDTout(e);}
div.innerHTML=html;
document.body.appendChild(div);
this.stars=Showbo.$s(Showbo.$('giveScore'),'img')
},
update:function(star){//==========评分过后更新浮动层中的内容
var Index=5-star;
this.cfgStars[Index]+=1;
this.total+=1;
this.totalScore+=star;
Showbo.$('spStarTotal').innerHTML=this.total;
Showbo.$('spStarN'+Index).innerHTML=this.cfgStars[Index]+'人';
//重新计算百分比并设置图片长度百分比
for(var i=0;i<5;i++)Showbo.$('imgStarPN'+i).style.width=Math.round((this.cfgStars[i]/this.total)*100)+'%';
//更新分数
Showbo.$('spAVG').innerHTML=Showbo.round(this.totalScore/this.total,1);
},
render:function(cfg){//cfg示例{id:'显示总评分的容器Id',star:'5星|4星|3星|2星|1星'} ,其中star部分是给的分的人数,循序就是示例中的
if(!cfg.id)throw('未指定容器');
var o=Showbo.$(cfg.id);
if("object"!=typeof(o))throw('未指定容器');
o.innerHTML='';
this.init(cfg.star);
var avg=this.total==0?0:Showbo.round(this.totalScore/this.total,1),it=Math.floor(avg);
var html='<font color="#cc3300"><span style="font-size:30px;font-weight:bold;" id="spAVG">'+avg+'</span>星</font>';
for(var i=1;i<=it;i++)html+='<img src="'+this.starRed+'" title="'+avg+'星级" class="h"/>';
if(avg>eval(it+'.4'))html+='<img src="'+this.starHalf+'" title="'+avg+'星级" class="h" style="height:12px;width:12px;"/>';
html+=" <img src='images/btndown.gif' id='imgShowbo.Star' width='12px' height='12px' title='顾客游客' "
+"border='0' style='cursor:pointer' onmouseover=\"this.src=this.src.replace('down','up');Showbo.$('starDetails').style.display='block';\" "
+"onmouseout=\"this.src=this.src.replace('up','down')\"/>";
var div=document.createElement("div");
div.id="dvInfoStar";
div.innerHTML=html;
o.appendChild(div);
this.initStar(o);
}
};
//获取文件名称,以便生成唯一cookie用的,如果文件名不符合下面的正则,注意要修改过正则表达式
Showbo.getFN=function(){var m=/\/([a-z]+\d*)(?=\.(html|aspx))/i.exec(window.location.href.replace(/(?=[\?|#]).*/,''));if(m)return m[1];else return '';}
//带小数位的舍入
Showbo.round=function(num,radixNum){var t=Math.pow(10,radixNum);return Math.round(num*Math.pow(10,radixNum))/t;}
//从字符串中还原为json对象
Showbo.GetJson=function(v){ return eval("(" + v + ')');}
//空函数
Showbo.emptyFN=function(){}
//获取某个对象的绝对位置
Showbo.getAbsPos=function(o,addXY){o=Showbo.$(o);var p=new Object();p.x=o.offsetLeft;p.y=o.offsetTop;while(o=o.offsetParent){p.x+=o.offsetLeft;p.y+=o.offsetTop;}if(addXY){if(!isNaN(addXY.x))p.x+=addXY.x;if(!isNaN(addXY.y))p.y+=addXY.y;}return p;}
//按id获取对象
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}
//按标签名称获取对象
Showbo.$s=function(){var o,tag;if(arguments.length==1){o=document;tag=arguments[0];}else{o=arguments[0];tag=arguments[1];}return o.getElementsByTagName(tag);}
//设置cookie
Showbo.SetCookie=function(name,value,icfgTime){var cfgTime={};if("undefined"==typeof(icfgTime))cfgTime.y=1;else cfgTime=icfgTime; var d=new Date();if(Showbo.IsNumeric(cfgTime.y))d.setFullYear(d.getFullYear()+cfgTime.y);if(Showbo.IsNumeric(cfgTime.M))d.setMonth(d.getMonth()+cfgTime.M);if(Showbo.IsNumeric(cfgTime.d))d.setDate(d.getDate()+cfgTime.d);if(Showbo.IsNumeric(cfgTime.h))d.setHours(d.getHours()+cfgTime.h);if(Showbo.IsNumeric(cfgTime.m))d.setMinutes(d.getMinutes()+cfgTime.m);if(Showbo.IsNumeric(cfgTime.s))d.setSeconds(d.getSeconds()+cfgTime.s);document.cookie=name+"="+value+";expires="+d.toGMTString();}
//获取cookie
Showbo.GetCookie=function(name){var m=new RegExp(name+'=([^;]+)','i').exec(document.cookie);if(m)return unescape(m[1]);return "";}
//如果非ie浏览器,扩充原属的contains方法
if(!Showbo.IsIE&&window.Element)Element.prototype.contains=function(o){if(this==o)return true;while(o=o.parentNode)if(o==this)return true;return false;}
//============================推荐部分
Showbo.Score={
version:1.0,
author:'showbo',
cfgStars:null,
//==========定义图片路径
starRed:'images/star_red.gif',
starGray:'images/star_gray.gif',
starHalf:'images/star_half.gif',
//==========
total:0,
totalScore:0,
stars:null,
fn:Showbo.getFN(),//获取文件名,注意要修改Show.getFN对应的正则,如果你的文件名和我的不一样的话,要不下面获取id会出错
fid:function(){return /\d+/.exec(this.fn);},//获取当前下载的文件的对应Id
//==============评分代码
reset:function(e,o){
var s=parseInt(o.getAttribute('star'),10);
if(e){
var toObj=e.toElement||e.relatedTarget;
if(toObj==o.nextSibling)o.nextSibling.src=Showbo.Score.starRed;
else if(toObj==o.previousSibling)o.src=Showbo.Score.starRed;
else for(var i=0;i<5;i++)Showbo.Score.stars[i].src=Showbo.Score.starGray;
}
else{
for(var i=0;i<s;i++)Showbo.Score.stars[i].src=Showbo.Score.starRed;
for(var i=s;i<5;i++)Showbo.Score.stars[i].src=Showbo.Score.starGray;
}
},
click:function(o){
var p=o.parentNode,score=parseInt(o.getAttribute('star'),10),me=this;
p.style.display='none';
p.nextSibling.style.display='block';
function ajaxHandle(xhr){//ajax回调函数
var json=xhr.status==200?Showbo.GetJson(xhr.responseText):{success:false,err:'评分出错,请联系管理员!'};
if(json.success){
me.reset(null,o);
p.style.display='block';
p.nextSibling.style.display='none';
p.innerHTML='您的评分为'+p.innerHTML.substring(5);
for(var i=0;i<me.stars.length;i++) me.stars[i].onclick= me.stars[i].onmouseover= me.stars[i].onmouseout=Showbo.emptyFN;
me.update(score);
Showbo.SetCookie(me.fn,score);
}else alert(json.err);
}
//调用ajax方法更新评分,如果你的评分动态页面试其他的,修改这里!!!!!!!!!!!!!!!!!
Showbo.Ajax.send({url:'codedown.aspx',method:'post',params:'id='+this.fid()+'&star='+score,success:ajaxHandle,failure:ajaxHandle});
},
//=============详细信息
starDTout:function(e){
e=e||event;
var o=e.toElement||e.relatedTarget,obj=Showbo.$('starDetails');
if(!o||!obj.contains(o))obj.style.display='none';//兼容ff,上面扩充了contains方法
},
init:function(star){
if("undefined"==typeof(star))star='';
this.cfgStars=star.split('|');
for(var i=0;i<this.cfgStars.length;i++)
if(!Showbo.IsNumeric(this.cfgStars[i]))this.cfgStars[i]=0;
else{
this.cfgStars[i]=parseInt(this.cfgStars[i]);
this.totalScore+=this.cfgStars[i]*(5-i);
}
while(this.cfgStars.length<5)this.cfgStars.push(0);
this.total=eval(this.cfgStars.join('+'));
},
initStar:function(container){
var total=this.total,p=Showbo.getAbsPos('imgShowbo.Star',{x:-265,y:12}),arrPT=new Array();
for(var i=0;i<5;i++)arrPT.push(Math.round((this.cfgStars[i]/total)*100)+'%');
var html='<div class="top">评分详情(<span id="spStarTotal">'+total+'</span>人)<img src="images/close.gif" alt="关闭" onclick="this.parentNode.parentNode.style.display=\'none\'"/></div>'+
'<div class="dt"><ul>';
for(var i=0;i<5;i++){
html+='<li><span class="star">';
for(var j=i;j<5;j++)html+='<img src="'+this.starRed+'" alt=""/>';
for(var j=5-i;j<5;j++)html+='<img src="'+this.starGray+'" alt=""/>';
html+='</span><span class="picnum"><img src="images/startiao.gif" id="imgStarPN'+i+'" width="'+arrPT[i]+'"/></span><span class="num" id="spStarN'+i+'">'+this.cfgStars[i]+'人</span></li>';
}
html+="</ul>";
var ckstar=0;
//通过文件名获取cookie判断是否评过分
if(this.fn){ckstar=Showbo.GetCookie(this.fn);if(Showbo.IsNumeric(ckstar))ckstar=parseInt(ckstar);else ckstar=0;}
html+="<div id='giveScore'><span>"+(ckstar==0?'请给出':'您的')+"评分"+(ckstar==0?'':'为')+":"
if(ckstar==0){
for(var i=0;i<5;i++)
html+='<img src="'+this.starGray+'" title="'+(i+1)+'星" onmouseout="Showbo.Score.reset(event,this)" star="'
+(i+1)+'" onclick="Showbo.Score.click(this)" onmouseover="Showbo.Score.reset(null,this)"/>';
html+="</span><span style='display:none;'>正在更新,请等待...</span></div>";
}else{
for(var i=0;i<ckstar;i++)html+='<img src="'+this.starRed+'"/>';
for(var i=ckstar;i<5;i++)html+='<img src="'+this.starGray+'"/>';
}
html+="</div>";
var div=document.createElement("div");
div.style.left=p.x+"px";
div.style.top=p.y+"px";
div.id="starDetails";
div.onmouseout=function(e){Showbo.Score.starDTout(e);}
div.innerHTML=html;
document.body.appendChild(div);
this.stars=Showbo.$s(Showbo.$('giveScore'),'img')
},
update:function(star){//==========评分过后更新浮动层中的内容
var Index=5-star;
this.cfgStars[Index]+=1;
this.total+=1;
this.totalScore+=star;
Showbo.$('spStarTotal').innerHTML=this.total;
Showbo.$('spStarN'+Index).innerHTML=this.cfgStars[Index]+'人';
//重新计算百分比并设置图片长度百分比
for(var i=0;i<5;i++)Showbo.$('imgStarPN'+i).style.width=Math.round((this.cfgStars[i]/this.total)*100)+'%';
//更新分数
Showbo.$('spAVG').innerHTML=Showbo.round(this.totalScore/this.total,1);
},
render:function(cfg){//cfg示例{id:'显示总评分的容器Id',star:'5星|4星|3星|2星|1星'} ,其中star部分是给的分的人数,循序就是示例中的
if(!cfg.id)throw('未指定容器');
var o=Showbo.$(cfg.id);
if("object"!=typeof(o))throw('未指定容器');
o.innerHTML='';
this.init(cfg.star);
var avg=this.total==0?0:Showbo.round(this.totalScore/this.total,1),it=Math.floor(avg);
var html='<font color="#cc3300"><span style="font-size:30px;font-weight:bold;" id="spAVG">'+avg+'</span>星</font>';
for(var i=1;i<=it;i++)html+='<img src="'+this.starRed+'" title="'+avg+'星级" class="h"/>';
if(avg>eval(it+'.4'))html+='<img src="'+this.starHalf+'" title="'+avg+'星级" class="h" style="height:12px;width:12px;"/>';
html+=" <img src='images/btndown.gif' id='imgShowbo.Star' width='12px' height='12px' title='顾客游客' "
+"border='0' style='cursor:pointer' onmouseover=\"this.src=this.src.replace('down','up');Showbo.$('starDetails').style.display='block';\" "
+"onmouseout=\"this.src=this.src.replace('up','down')\"/>";
var div=document.createElement("div");
div.id="dvInfoStar";
div.innerHTML=html;
o.appendChild(div);
this.initStar(o);
}
};
样式表部分
+展开
-CSS
/*bookstar*/
#starDetails{display:none;font-size:12px;position:absolute;width:270px;border:solid 1px #cccccc;z-index:10;}
#starDetails .top{height:23px;line-height:23px; vertical-align:middle;padding-left:20px;background:url(../images/startop.gif) repeat-x;}
#starDetails .top img{position:absolute;right:2px;top:2px;cursor:pointer;}
#starDetails .dt{height:140px;background:url(../images/starbg.gif) repeat-x;width:100%;}
#starDetails .dt ul{margin:0px;list-style:none;padding:13px 0px 0px 10px;}
#starDetails .dt ul li{height:22px;}
#starDetails .dt ul li span{display:block;float:left;}
#starDetails .dt ul li span.star{width:65px;}
#starDetails .dt ul li span.picnum{width:120px;border:solid 1px #bbbbbb;height:14px;}
#starDetails .dt ul li span.picnum img{height:100%;}
#starDetails .dt ul li span.num{width:60px;height:20px;overflow:hidden;padding-left:10px;line-height:20px;vertical-align:bottom;}
#starDetails .dt #giveScore{padding-left:10px;}
#dvInfoStar{height:14px;line-height:14px;font-size:12px;vertical-align:middle;display:inline;font-weight:normal;}
#starDetails{display:none;font-size:12px;position:absolute;width:270px;border:solid 1px #cccccc;z-index:10;}
#starDetails .top{height:23px;line-height:23px; vertical-align:middle;padding-left:20px;background:url(../images/startop.gif) repeat-x;}
#starDetails .top img{position:absolute;right:2px;top:2px;cursor:pointer;}
#starDetails .dt{height:140px;background:url(../images/starbg.gif) repeat-x;width:100%;}
#starDetails .dt ul{margin:0px;list-style:none;padding:13px 0px 0px 10px;}
#starDetails .dt ul li{height:22px;}
#starDetails .dt ul li span{display:block;float:left;}
#starDetails .dt ul li span.star{width:65px;}
#starDetails .dt ul li span.picnum{width:120px;border:solid 1px #bbbbbb;height:14px;}
#starDetails .dt ul li span.picnum img{height:100%;}
#starDetails .dt ul li span.num{width:60px;height:20px;overflow:hidden;padding-left:10px;line-height:20px;vertical-align:bottom;}
#starDetails .dt #giveScore{padding-left:10px;}
#dvInfoStar{height:14px;line-height:14px;font-size:12px;vertical-align:middle;display:inline;font-weight:normal;}
代码示例
+展开
-JavaScript
Showbo.Score.render({id:'容器id',star:'从数据库中读取到的存储分数的字段的内容'});}
类别:JavaScript/Ajax 作者:波波 日期:2009-09-10 【评论:1 阅读:】
日期:2009-10-9 10:36:35 IP:122.225.*.*
笑纳了!呵呵管理员回复(2009-10-9 11:24:50)
hoho~~
发表留言
同类热门博文
- ·AJAX跨域问题解决办..
- ·ajax+asp.net+mssql..
- ·ajax问题总结
- ·JavaScript解析XML的..
- ·JS URL编码函数
- ·ajax无刷新上传文件..
- ·ajax+asp+mssql无刷..
- ·关于IFRAME 自适应高..
博格Tag
- flash/flex/fcs/AIR(750)
- Asp.Net/C#/WCF(486)
- JavaScript/Ajax(242)
- 操作系统及应用软件(232)
- SQL及数据库(105)
- 黑客技术(96)
- Asp/VBScript(85)
- 网站排名及优化(84)
- PHP/apache/Perl(75)
- HTML/WML/CSS兼容(66)
- 其他(61)
- 个人日志(44)
- lucence.net/分词技术(33)
- C#设计模式(22)
- 计算机网络(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(10)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载或引用的作品侵犯了您的权利,请通知我们,我们会及时删除!
Powered by showbo,G51人力资讯网,桂ICP备05005887号
Powered by showbo,G51人力资讯网,桂ICP备05005887号
