search

Home >Web Front-end >JS Tutorial >How to implement the article like function with jQuery+ajax_jquery

How to implement the article like function with jQuery+ajax_jquery

WBOY
WBOYOriginal
2016-05-16 15:22:271369browse

The example in this article describes the method of jQuery+ajax to implement the article like function. Share it with everyone for your reference, the details are as follows:

A few days ago, someone asked me for the like function in the upper right corner of this site. Mai Cong thought about it and decided to share this function. I hope this function will bring convenience to everyone.

The code is very simple, implemented by jQuery+php.

jQuery code: 

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 code: 

<&#63;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) &#63; intval(file_get_contents($path)) : 0;
}
&#63;>

html code: 

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

With appropriate css 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; }

That’s it, keep it simple!

Here is the complete code: 

<&#63;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) &#63; intval(file_get_contents($path)) : 0;
&#63;>
<!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><&#63;php echo $zan; &#63;></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>

The title says there is no limit to likes, so Mai Cong will tell you a little trick: 

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

Of course, if you use Accelerate CC (like Mai Cong) and get too many like requests, you will be blocked! Unless you cancel POST in jQuery

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implement pop-up page effect based on Javascript_javascript skillsNext article：Implement pop-up page effect based on Javascript_javascript skills

Related articles

See more