jQuery+ajax实现文章点赞功能的方法
本文实例讲述了jQuery+ajax实现文章点赞功能的方法。分享给大家供大家参考，具体如下：
前几日有童鞋问我索要本站右上角的点赞功能，麦葱左思右想，决定把这功能分享出来,希望此功能对各位会带来方便哦。
代码很简单，jQuery+php实现的。
jQuery代码：
jQuery(document).ready(function($){
$(".zan").click(function(e){
var$i=$(".zani"),$b=$("<b>").text("+1"),n=parseInt($i.text());
$b.css({
"bottom":0,
"z-index":999,
});
$i.text(n+1);
$(".zan").append($b);
$b.animate({"bottom":100,"opacity":0},1000,function(){$b.remove();});
vard=setInterval(function(){
clearInterval(d);
if($(".zanb").length==1){
$.post("",{zan:$i.text()})
}
},1000)
e.stopPropagation();
});
});
php代码：
<?php
$path="zan.txt";
if(isset($_POST['zan'])){
$num=(int)$_POST['zan'];
$save=fopen($path,"w");
fwrite($save,$num);
fclose($save);
echo"good";
exit();
$zan=file_exists($path)?intval(file_get_contents($path)):0;
}
?>
html代码：
<divclass="main"> <divclass="zan"><em>看官们给了<i><?phpecho$zan;?></i>个赞</em></div> </div>
配上合适的css样式：
.main{position:relative;font-size:10pt;line-height:18px;margin:40pxauto;width:800px;height:170px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.zan{position:absolute;top:20%;left:45%;width:160px;height:110px;background:url("zan.jpg")centerno-repeat;cursor:pointer;opacity:0.85;}
.zan:active{opacity:1;}
.zanem{position:absolute;color:#333;font-style:normal;bottom:-15px;width:100%;text-align:center;}
.zani{font-style:normal;color:#E94F06;}
.zanb{position:absolute;color:#E94F06;font-style:normal;bottom:-15px;width:100%;text-align:center;}
就是这样，简单吧！
下面是完整代码：
<?php
$path="zan.txt";
if(isset($_POST['zan'])){
$num=(int)$_POST['zan'];
$save=fopen($path,"w");
fwrite($save,$num);
fclose($save);
echo"good";
exit();
}
$zan=file_exists($path)?intval(file_get_contents($path)):0;
?>
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>我要点赞</title>
<style>
.main{position:relative;font-size:10pt;line-height:18px;margin:40pxauto;width:800px;height:170px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.zan{position:absolute;top:20%;left:45%;width:160px;height:110px;background:url("zan.jpg")centerno-repeat;cursor:pointer;opacity:0.85;}
.zan:active{opacity:1;}
.zanem{position:absolute;color:#333;font-style:normal;bottom:-15px;width:100%;text-align:center;}
.zani{font-style:normal;color:#E94F06;}
.zanb{position:absolute;color:#E94F06;font-style:normal;bottom:-15px;width:100%;text-align:center;}
</style>
</head>
<body>
<divclass="main">
<divclass="zan"><em>看官们给了<i><?phpecho$zan;?></i>个赞</em></div>
</div>
<scriptsrc="jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$(".zan").click(function(e){
var$i=$(".zani"),$b=$("<b>").text("+1"),n=parseInt($i.text());
$b.css({
"bottom":0,
"z-index":999,
});
$i.text(n+1);
$(".zan").append($b);
$b.animate({"bottom":100,"opacity":0},1000,function(){$b.remove();});
vard=setInterval(function(){
clearInterval(d);
if($(".zanb").length==1){
$.post("",{zan:$i.text()})
}
},1000)
e.stopPropagation();
});
});
</script>
</body>
</html>
标题都说了是无上限点赞的，So，麦葱告诉大家个小诀窍：
/*怒赞*/
jQuery.noConflict();
functionzan(){
setInterval(function(){
jQuery(".zan").click();
zan();
},600)
}
zan();
当然，如果你使用了加速乐防CC（麦葱就是），怒赞请求量过多，会被屏蔽掉哦！除非你取消掉jQuery里的POST
希望本文所述对大家jQuery程序设计有所帮助。