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 相关文章推荐
js href的用法
May 13 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
小程序云开发实战小结
Oct 25 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python datetime处理时间小结
2020/04/16 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
部队领导证婚词
2014/01/12 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年司机工作总结
2015/04/23 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS