现在位置:首页 » emlog相关 »

EMLOG博客非插件实现打赏功能和点赞功能方法介...

心岛发布于2018年03月19日  分类: emlog相关  浏览:83 人次  评论:0 

dianzan.jpg

声明:本代码是来自舍力博客,本人经过亲测、完善后分享至此,仅供大家学习研究之用。

实现两个功能的代码主要有三部分,第一部分是js代码;第二部分是放于module.php中的php代码,第三部分是放于需要显示按钮页面模版的php代码(一般为echo_log.php),外加第四部分,两个功能代码的CSS样式表。

第一部分:js代码,由于这类代码很容易导致代码冲突,经过几次实验个人觉得这个功能代码单独打包为一个js文件,然后在需要调用该功能的页面顶部调用比较好,以防代码干扰或者冲突;因此,我将代码命名为zanshang.js以下为代码:


function dashangToggle(){$(".shang_box").fadeToggle();}function changeItem(i){var k = 3;for(var j = 0;j < k;j++){if(j == i){document.getElementById("sl_shang" + j).style.display = "block";}else{document.getElementById("sl_shang" + j).style.display = "none";}}}function opay(){document.getElementById("sl_shang").target="_parent";}//打赏js

$(document).on('click', '.slzanpd',
function() {
	var a = $(this),
	id = a.data('slzanpd');
	if (slzanpd_check(id)) {
		alert('您已赞过本文!');
	} else {
		$.post('', {
			plugin: 'slzanpd',
			action: 'slzan',
			id: id
		},
		function(b) {
			a.find('u').html(b);
			slzanpd_(a);
		});
	}
});
function slzanpd_check(id) {
	return new RegExp('slzanpd_' + id + '=true').test(document.cookie);
}
$('[data-slzanpd]').each(function() {
	var a = $(this),
	id = a.data('slzanpd');
	if (slzanpd_check(id)) {
		slzanpd_(a);
	} else {
		a.attr('title', '给心岛来点动力吧!')
	}
});
function slzanpd_(a) {
	a.css('cursor', 'not-allowed').attr('title', '您已赞过本文!');

}

第二部分:module.php中的php代码


<?php //点赞
function syzan(){
$DB = MySql::getInstance();
if($DB->num_rows($DB->query("show columns from ".DB_PREFIX."blog like 'slzan'")) == 0){
$sql = "ALTER TABLE ".DB_PREFIX."blog ADD slzan int unsigned NOT NULL DEFAULT '0'";
$DB->query($sql);}}syzan();
function update($logid){
$logid = intval($_POST['id']);
$DB = Database::getInstance();
$DB->query("UPDATE " . DB_PREFIX . "blog SET slzan=slzan+1 WHERE gid=$logid");
setcookie('slzanpd_'. $logid, 'true', time() + 31536000);}
function lemoninit() {if( @$_POST['plugin'] == 'slzanpd' &&@$_POST['action'] == 'slzan' &&isset($_POST['id'])){
$id = intval($_POST['id']);
header("Access-Control-Allow-Origin: *");
update($id);echo getnum($id);die;}}lemoninit();
function getnum($id){
static $arr = array();
$DB = Database::getInstance();
if(isset($arr[$logid])) return $arr[$logid];
$sql = "SELECT slzan FROM " . DB_PREFIX . "blog WHERE gid=$id";
$res = $DB->query($sql);
$row = $DB->fetch_array($res);
$arr[$id] = intval($row['slzan']);
return $arr[$id];}
?>

第三部分:放于需要显示按钮页面模版的php代码

<div class="sy_shang">
				<a class="slzanpd" data-slzanpd="<?php echo $logData['logid'];?>" title="喜欢这篇文章就赞一个吧!">赞 (<?php echo(isset($logData['slzan'])?$logData['slzan']:getnum($logData['logid']));?>次)</a>
<a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏,支持一下">打赏</a>
<div class="shang_box"><a href="javascript:void(0)" onclick="dashangToggle()" title="关闭" style="float:right;">X</a>
<div id="sl_shang" onsubmit="return postcheck()"><div class="sl_shang"><b>打赏方式:</b><ul><li><input type="radio" name="paytype" onclick="opay();return changeItem(0);"  checked="checked" />支付宝</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(1);" />微信</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(2);"  />QQ红包</li></ul></div>
<div id="sl_shang0"><img src="<?php echo TEMPLATE_URL; ?>images/shang/zfb.jpg"><br>打开支付宝扫一扫</div><div id="sl_shang1" style="display:none;"><img src="<?php echo TEMPLATE_URL; ?>images/shang/wx.jpg"><br>使用微信扫一扫</div><div id="sl_shang2" style="display:none;"><img src="<?php echo TEMPLATE_URL; ?>images/shang/qq.jpg"><br>打开QQ扫一扫</div>
</div></div>
</div>
上面的代码希望大家根据自己实际情况套用,记得更改图片网址。

第四部分:CSS样式表:

/*---打赏--*/
.sy_shang{overflow:hidden;margin:20px auto;max-width:340px;}
.shang_box{width:300px;height:300px;margin:auto;padding:10px;background:#fff;border-radius:10px;position:fixed;z-index:1000;left:0;right:0;top:0;bottom:0;border:1px dotted #dedede;display:none;}
.dashang,.slzanpd{display:block;width:160px;height:40px;line-height:40px;color:#fff;border-radius:3px;font-size:14px;text-align:center;float:left;margin:5px;}
.dashang{background:#66CC66;}
.slzanpd{background:#F25022;}
.sy_shang a{text-decoration:none!important;color:#FFF!important;}
.shang_box a{color:#000!important;}
.dashang:hover,.slzanpd:hover{background:#666;}
#sl_shang0,#sl_shang1,#sl_shang2{text-align:center;}
#sl_shang0 img,#sl_shang1 img,#sl_shang2 img{max-width:260px;}
.sl_shang{overflow:hidden;}.sl_shang b{font-size:18px;}
.sl_shang ul{margin-top:10px;clear:both;overflow:hidden;}
.sl_shang li{float:left;margin-left:10px;}

赞 (4次) 打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫

本文由心岛原创或编辑,转载请保留链接【EMLOG博客非插件实现打赏功能和点赞功能方法介绍】http://www.liangxin.name/?post=230
本文百度已收录,点此查看详细信息
本文标签: 代码修改 网站建设 emlog 方法 模板修改
上一篇: 实现Emlog内容页判断百度收录与否的方法
下一篇:关于emlog幻灯片/轮播图片调用分类置顶/首页置顶文章的方法
目前有 0 条评论