你的位置: 首页 > HTML5网站开发 > 正文
顶/踩文章的digg功能详解及ASP示例
作者:漫游   分类: HTML5网站开发    时间:2011-10-18 9:51   热度:14408°   字号:        评论:0 
作者:漫游   分类: HTML5网站开发    时间:2011-10-18 9:51   热度:14408°  评论:0 条 

用到的DEDECMS的文件:digg_ajax.php,dedeajax2.js

 

前台代码(文件路径自行修改):
<script language="javascript" type="text/javascript" src="dedeajax2.js"></script>
<script language="javascript" type="text/javascript">
<!--
function postDigg(ftype,aid)
{
 var taget_obj = document.getElementById('newdigg');
 var saveid = GetCookie('diggid');
 if(saveid != null)
 {
  var saveids = saveid.split(',');
  var hasid = false;
  saveid = '';
  j = 1;
  for(i=saveids.length-1;i>=0;i--)
  {
   if(saveids[i]==aid && hasid) continue;
   else {
    if(saveids[i]==aid && !hasid) hasid = true;
    saveid += (saveid=='' ? saveids[i] : ','+saveids[i]);
    j++;
    if(j==20 && hasid) break;
    if(j==19 && !hasid) break;
   }
  }
  if(hasid) { alert("您已经顶过该帖,请不要重复顶帖 !"); return; }
  else saveid += ','+aid;
  SetCookie('diggid',saveid,1);
 }
 else
 {
  SetCookie('diggid',aid,1);
 }
 myajax = new DedeAjax(taget_obj,false,false,'','','');
 var url = "/DedeCms/plus/digg_ajax.php?action="+ftype+"&id="+aid+"&rnd="+Math.random();
 myajax.SendGet2(url);
//getDigg(aid);    //可能要加上这句才能更新显示
}
function getDigg(aid)
{
 var taget_obj = document.getElementById('newdigg');
 myajax = new DedeAjax(taget_obj,false,false,'','','');
 myajax.SendGet2("/DedeCms/plus/digg_ajax.php?id="+aid);
 DedeXHTTP = null;
}
-->
</script>

   <!-- //顶踩 -->
   <div class="newdigg" id="newdigg">
    <div class="diggbox digg_good" onmousemove="this.style.backgroundPosition='left bottom';" onmouseout="this.style.backgroundPosition='left top';" onclick="javascript:postDigg('good',1)">
     <div class="digg_act">顶一下</div>
     <div class="digg_num">(0)</div>
     <div class="digg_percent">
      <div class="digg_percent_bar"><span style="width:0%"></span></div>
      <div class="digg_percent_num">0%</div>
     </div>
    </div>
    <div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition='right bottom';" onmouseout="this.style.backgroundPosition='right top';" onclick="javascript:postDigg('bad',1)">
     <div class="digg_act">踩一下</div>
     <div class="digg_num">(0)</div>
     <div class="digg_percent">
      <div class="digg_percent_bar"><span style="width:0%"></span></div>
      <div class="digg_percent_num">0%</div>
     </div>
    </div>
   </div>
   <script language="javascript" type="text/javascript">getDigg(1);</script>
   <!-- //顶踩部份的源码结束 -->

样式:
/*顶踩*/
.newdigg{ width:406px; height:51px; margin:8px auto; clear:both; overflow:hidden; padding-left:8px;}
.diggbox{ width:195px; height:51px; float:left; margin-right:8px; overflow:hidden; cursor:pointer;}
.diggbox .digg_act{ font-size:14px; float:left; line-height:31px; text-indent:32px; height:29px; overflow:hidden; font-weight:bold;}
.diggbox .digg_num{ float:left; line-height:29px; text-indent:5px;}
.diggbox .digg_percent{ width:180px; clear:both; padding-left:10px; overflow:hidden;}
.diggbox .digg_percent .digg_percent_bar{ width:100px; height:7px; background:#E8E8E8; border-right:1px solid #CCC; float:left; overflow:hidden; margin-top:3px;}
.diggbox .digg_percent .digg_percent_num{ font-size:10px; float:left; padding-left:10px;}
.diggbox .digg_percent .digg_percent_bar span{ display:block; height:5px; overflow:hidden; background:#000;}
.newdigg .digg_good{ background:url(./images/newdigg-bg.png) left top no-repeat;}
.newdigg .digg_bad{ background:url(./images/newdigg-bg.png) right top no-repeat;}
.newdigg .digg_good .digg_act{ color:#C30; }
.newdigg .digg_good .digg_num{ color:#C63;}
.newdigg .digg_bad .digg_act{ color:#36C; }
.newdigg .digg_bad .digg_num{ color:#39C;}
.newdigg .digg_good .digg_percent .digg_percent_bar span{ border:1px solid #E37F24; background:#FFC535;}
.newdigg .digg_bad .digg_percent .digg_percent_bar span{ border:1px solid #689ACC; background:#94C0E4;}
.handle{ height:59px; padding-top:12px; overflow:hidden; clear:both;}
.handle .digg{ width:59px; height:59px; float:left; background:url(./images/digg-bg.gif) no-repeat; margin-right:12px;}
.handle .digg .digg_num{ width:56px; height:34px; font-size:20px; text-align:center; line-height:34px; overflow:hidden; color:#6B9169;}
.handle .digg .digg_act{ width:56px; height:22px; line-height:23px; overflow:hidden;}
.handle .digg .digg_act a{ margin-left:11px; color:#666; float:left;}


程序原理:先显示顶踩的样子,通过点击顶或踩触发postDigg(ftype,aid)函数,这里通过ajax发送到php页面处理,该页面处理好数据后返回<div class="newdigg" id="newdigg"></div>间的所有html代码,这时可能再执行一次getDigg(aid)来把内容显示到原来位置。JS通过检测cookie("diggid")的值与当前信息的id有否重复,有则判断为已经顶过。
下面是ASP的digg_ajax.asp代码,大家作些各自的修改就可以用:

<%@ CODEPAGE=936 %>
<%
Response.CodePage=936
Response.Charset="gb2312"
Response.AddHeader "Pragma", "no-cache"
Response.AddHeader "cache-ctrol", "no-cache"
Response.CacheControl = "no-cache"
Response.Flush
%>
<!--#include virtual="/inc/conn.asp"-->
<!--#include virtual="/inc/function.asp"-->
<%
id = request.QueryString("id")    '进行数值处理
action = request.QueryString("action")
saveid = request.Cookies("diggid")
if instr(","&saveid&",", ","&id&",") > 0 then response.end

set rs=server.createobject("adodb.recordset")
rs.open "select top 1 * from info where is_pass=1 and id=" & id,conn,1,3
if rs.eof then
' msgAlert "要查看的信息不存在或未审核。"
 response.End()
else
 if action = "good" then rs("act_good") = rs("act_good") + 1
 if action = "bad" then rs("act_bad") = rs("act_bad") + 1
 rs.update
 act_good = rs("act_good")
 act_bad = rs("act_bad")
end if
rs.close

if act_good+act_bad=0 then
 act_good_per = 0
 act_bad_per = 0
else
 act_good_per=cint(act_good/(act_good+act_bad)*100)
 act_bad_per=100-act_good_per
end if

set rs=nothing
CloseConn()
digg = ""
digg = digg & "<div class=""diggbox digg_good"" onmousemove=""this.style.backgroundPosition='left bottom';"" onmouseout=""this.style.backgroundPosition='left top';"" onclick=""postDigg('good'," & id & ")"">"
digg = digg &            "<div class=""digg_act"">顶一下</div>"
digg = digg &            "<div class=""digg_num"">(" & act_good & ")</div>"
digg = digg &            "<div class=""digg_percent"">"
digg = digg &            "    <div class=""digg_percent_bar""><span style=""width:" & act_good_per & "%""></span></div>"
digg = digg &            "    <div class=""digg_percent_num"">" & act_good_per & "%</div>"
digg = digg &            "</div>"
digg = digg &        "</div>"
digg = digg &        "<div class=""diggbox digg_bad"" onmousemove=""this.style.backgroundPosition='right bottom';"" onmouseout=""this.style.backgroundPosition='right top';"" onclick=""postDigg('bad'," & id & ")"">"
digg = digg &            "<div class=""digg_act"">踩一下</div>"
digg = digg &            "<div class=""digg_num"">(" & act_bad & ")</div>"
digg = digg &            "<div class=""digg_percent"">"
digg = digg &            "    <div class=""digg_percent_bar""><span style=""width:" & act_bad_per & "%""></span></div>"
digg = digg &            "    <div class=""digg_percent_num"">" & act_bad_per & "%</div>"
digg = digg &            "</div>"
digg = digg &        "</div>"
response.write digg
%>

瞧瞧上一篇文章去!   瞧瞧下一篇文章去!
本文标签: ASP
二维码加载中...
本文作者:漫游      文章标题: 顶/踩文章的digg功能详解及ASP示例
本文地址:http://www.roammemo.com/html5/26.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
返回顶部    首页    手机版本   
版权所有:漫游的备忘录    站长: 漫游    模板基于:博闻广记 v1.2   程序:emlog