jQuery+ajax实现文章点赞功能的方法


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery+ajax实现文章点赞功能的方法。分享给大家供大家参考,具体如下:

前几日有童鞋问我索要本站右上角的点赞功能,麦葱左思右想,决定把这功能分享出来,希望此功能对各位会带来方便哦。

代码很简单,jQuery+php实现的。

jQuery代码:

jQuery(document).ready(function($) {
$(".zan").click(function(e){
var $i=$(".zan i"), $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();});
var d = setInterval(function(){
clearInterval(d);
if($(".zan b").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代码:

<div class="main">
<div class="zan"><em>看官们给了 <i><?php echo $zan; ?></i> 个赞</em></div>
</div>

配上合适的css样式:

.main { position: relative; font-size: 10pt; line-height: 18px; margin: 40px auto; 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") center no-repeat; cursor: pointer; opacity: 0.85; }
.zan:active { opacity: 1; }
.zan em { position: absolute; color: #333; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
.zan i { font-style: normal; color: #E94F06; }
.zan b { 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;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我要点赞</title>
<style>
.main { position: relative; font-size: 10pt; line-height: 18px; margin: 40px auto; 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") center no-repeat; cursor: pointer; opacity: 0.85; }
.zan:active { opacity: 1; }
.zan em { position: absolute; color: #333; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
.zan i { font-style: normal; color: #E94F06; }
.zan b { position: absolute; color: #E94F06; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
</style>
</head>
<body>
<div class="main">
<div class="zan"><em>看官们给了 <i><?php echo $zan; ?></i> 个赞</em></div>
</div>
<script src="jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$(".zan").click(function(e){
var $i=$(".zan i"), $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();});
var d = setInterval(function(){
clearInterval(d);
if($(".zan b").length == 1){
$.post("",{zan:$i.text()})
}
},1000)
e.stopPropagation();
});
});
</script>
</body>
</html>

标题都说了是无上限点赞的,So,麦葱告诉大家个小诀窍:

/* 怒赞 */
jQuery.noConflict();
function zan() {
setInterval(function () {
jQuery(".zan").click();
zan();
}, 600)
}
zan();

当然,如果你使用了加速乐防CC(麦葱就是),怒赞请求量过多,会被屏蔽掉哦!除非你取消掉jQuery里的POST

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
jQuery实现的超简单点赞效果实例分析
Dec 31 #Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
javascript图片延迟加载实现方法及思路
Dec 31 #Javascript
You might like
解析php如何将日志写进syslog
2013/06/28 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python实时监控cpu小工具
2018/06/21 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
2014年营业员工作总结
2014/11/18 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
员工辞退通知书
2015/04/17 职场文书
企业法律事务工作总结
2015/08/11 职场文书