=波波日志 > 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();
        }
    }


下面这个是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




下面是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);
  }
};




样式表部分
+展开
-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;}




代码示例
+展开
-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~~

发表留言
  • *昵称:
  • 头像:
  • 电子邮件: [留下您的邮件,方便管理员回复您。]
  • 个人网站: *验证码:
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载或引用的作品侵犯了您的权利,请通知我们,我们会及时删除!
Powered by showbo,G51人力资讯网桂ICP备05005887号