======================================================
注:本文源代码点此下载
======================================================
先看下效果图
本博客上面的顶一下,踩一下效果是直接用别人做好的插件放上去的,上星期正好要用到这个效果,就去研究了下。下面就一步一步来实现整个效果。。。。
demo页面的实现
xml/html代码
div class="digg" id="digg">
div class="good"> a href="#">p>这个文档不错p>
div class="bar">div id="g_img" style="width:70%">div>
div>span class="num" id="num">70%(7000)span> a> div>
div class="bad"> a href="#">p>文档有待改进p>
div class="bar">div id="b_img" style="width:30%">div>
div>span class="num">30%(3000)span> a> div>
div>
主要一点就是通过百分比来控制g_img的宽度,至于css代码就不贴出来了。
有了demo,其他实现起来就方便多了,首先是页面获取html,页面第一次加载,用ajax获取后台数据,不要直接显示。(这里为了方便测试,就用asp作为后台语言)
下面是asp输出html代码
xml/html代码
function getdigshtml()'输出html
dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsperset rsajax=server.createobject("adodb.recordset")
sql="select * from dig where id=1"rsajax.open sql,conn,1,1
digsnum=rsajax("digs")undigsnum=rsajax("undigs")
if isnull(digsnum) then digsnum=0if isnull(undigsnum) then undigsnum=0
digsnumdigsnumall=digsnum+undigsnum
if digsnumall=0 thendigsper=0
undigsper=0else
digsper=formatnumber(cint(digsnum)/cint(digsnumall),3)*100undigsper=formatnumber(cint(undigsnum)/cint(digsnumall),3)*100
end if
str="
"strstr=str&"a href=javascript:isdigs('digs') >"
strstr=str&"p>这个文档不错p>div class='bar'>div id='g_img' style='width:"&digsper&"%'>div>div>"strstr=str&"span class='num'>"&digsper&"%("&digsnum&")span>"
strstr=str&"a>div>div class='bad'>"strstr=str&"a href=javascript:isdigs('undigs') >"
strstr=str&"p>文档有待改进p>div class='bar'>div id='b_img' style='width:"&undigsper&"%'>div>div>"strstr=str&"span class='num'>"&undigsper&"%("&undigsnum&")span>"
strstr=str&"a>div>"getdigshtml=str
end function
输出完了 接下来就是前台获取,这时候我们就要用到jquery ajax,为什么不直接用ajax,原因很简单,我不会。。。。。看一下jquery中ajax代码,很简单
javascript代码
function getdigshtml()//获取顶一下,踩一下html
{$.ajax({
type:'post',url:'digg.asp',
data:'action=getdigshtml',success:function(msg){
$("#digg").html(msg);}
})}
输出完了,接下来一步就是digs和undigs的操作了,跟获取html的代码差不多
javascript代码
function isdigs(digtype)//顶一下,踩一下操作
{$.ajax({
type:'post',url:'digg.asp',
data:'action=digs&digtype='+digtype,/*beforesend:function(){
$("#vote").hide();$("#loadings").show();
}, ajax请求显示loading效果*/success:function(msg){
switch (msg){
/*后台用来判断case '1':
$("#loadings").hide();$("#vote").show();
alert("请先登录!");break;
case '2':$("#loadings").hide();
$("#vote").show();alert("请先下载,再操作!");
break;case '4':
$("#loadings").hide();$("#vote").show();
alert("您已经参与过评价!");break;*/
case '3':getdigshtml();//重新绑定html
//$("#loadings").hide();//$("#vote").show();
alert("谢谢你的参与!");break;
default:
}}
})}
注释掉的代码:一部分是后台数据合法验证用的,beforesend这个方法是ajax请求执行前的相关操作(用于做loading比较多)
最后一步就是,每次数据提交完并且成功返回,getdigshtml()都要重新获取绑定下,这样就保证了数据的实时性。
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/