Rumah > Artikel > hujung hadapan web > jQuery kaedah ajax untuk melaksanakan artikel seperti function_jquery
Contoh dalam artikel ini menerangkan cara jQuery ajax melaksanakan fungsi seperti artikel. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:
Beberapa hari yang lalu, ada yang meminta saya untuk fungsi suka di sudut kanan atas laman web ini dan memutuskan untuk berkongsi fungsi ini.
Kod ini sangat mudah, dilaksanakan oleh jQuery php.
Kod 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(); }); });
kod 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; } ?>
kod html:
<div class="main"> <div class="zan"><em>看官们给了 <i><?php echo $zan; ?></i> 个赞</em></div> </div>
Dengan gaya css yang sesuai:
.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; }
Itu sahaja, permudahkan!
Berikut ialah kod lengkap:
<?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>
Tajuknya mengatakan tiada had untuk suka, jadi Mai Cong akan memberitahu anda sedikit helah:
/* 怒赞 */ jQuery.noConflict(); function zan() { setInterval(function () { jQuery(".zan").click(); zan(); }, 600) } zan();
Sudah tentu, jika anda menggunakan Accelerate CC (seperti Mai Cong) dan mendapat terlalu banyak permintaan suka, anda akan disekat! Melainkan anda membatalkan POST dalam jQuery
Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.