转换为语音并朗读全文 00:00 / 00:00

20140423100236

前几日有童鞋问我索要本站右上角的点赞功能,麦葱左思右想,决定把这功能分享出来。

代码很简单,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("http://cdn0.yuxiaoxi.com/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("http://cdn0.yuxiaoxi.com/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="http://cdn.bootcss.com/jquery/2.1.0/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。

 


 

有熊孩子会刷赞,赞数超过9223372036854775807就超出整形范围了,针对这个问题,麦葱建议大家这样解决:

$tzan = $zan >9223372036854775807 ? $tzan= "技能条已满点" : $zan;

然后把<i><?php echo $zan; ?></i>改为<i title="<?php echo $zan; ?>"><?php echo $tzan; ?></i>就行了!

熊孩子没有道理可讲啊!不得已麦葱放出加强版点赞:

更新jQuery代码:

jQuery(document).ready(function($) {
var znum = 0;
function cp(s){
if(s){
var d = setTimeout(function(){
if($(".zan b").length == 0){
$.post("",{zan:znum},
function(r){
znum = 0;
if(r !="get"){
alert(r);
}
});
}
},1000)
}
}
$(".zan").on('mousedown',function(e){
cp(false);
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();znum++;});
e.stopPropagation();
}).on('mouseup',function(e){
cp(true);
});
});

更新php代码:

<?php
$path = "zan.txt";
if(isset($_SESSION['zan'])){
$zan = $_SESSION['zan'];
}
$zan = file_exists($path) ? file_get_contents($path) : 0;

if(isset($_POST['zan']) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
if(preg_match('/^\d+$/',$_POST['zan'])){
$num = $zan + $_POST['zan'];
$save = fopen($path,"w");
fwrite($save,$num);
fclose($save);
$_SESSION['zan'] = $num;
echo "get";
}else{
echo "骚年,你脱团了!";
}
exit();
}
?>

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. 晨风
    晨风

    装逼必备。 :mrgreen:

    回复
  2. 哈哈哈
    哈哈哈

    建议楼主直接把这个功能添加到模板里,或者步骤说的简单点,小白听不懂啊

    回复
  3. 书法时间
    书法时间

    太强 了。能否通过这个插件出来一个点赞的排名呢?

    回复
  4. 奇虎
    奇虎

    报告、点赞完毕

    回复
  5. 奇虎
    奇虎

    不知道一直连点是个什么效果

    回复
  6. 小黎
    小黎

    没忍住,我也给自己加上了

    回复
  7. 同盟源
    同盟源

    真的有人拿着鼠标连点器然后消耗你数据库...

    回复
  8. nickname
    nickname

    贡献了无数加无数个赞

    回复