用到的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
%>
本文地址:http://www.roammemo.com/html5/26.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。