用js实现博客打赏功能
前几天在一个博客中看到有一个打赏功能。其实简单说来就是在页面中加入动态DOM节点，使用的也是简单的HTML、CSS、JS这些前端的一些简单知识。在GitHub上有开源的代码，这里稍加改造就可以用在自己的博客中了。
最简单的使用方式是在页面中加入如下JS代码:
<script>
window.tctipConfig={
staticPrefix:"http://static.tctip.com",
buttonImageId:1,
buttonTip:"zanzhu",
list:{
alipay:{qrimg:"http://tctip.com/img/alipayqr.png"},
weixin:{qrimg:"http://littlebtc.com/images/yeshen.png"},
}
};
</script>
<scriptsrc="http://static.tctip.com/js/tctip.min.js"></script>
其中比较重要的是配置有staticPrefix，是原作者自己提供的静态文件相对路径，用来存放img和css；list是打赏方式，qrimg是设置打赏方式的二维码图片。
接下来是在博客园中使用。先在本地准备好静态文件：
JS文件，tctip.min.js；
css样式文件，myReward.css；
支付二维码，ialipay.bmp、iweixin.bmp；
支付方式图片，alipay.bmp、weixin.bmp；
赞助或者打赏按钮图片，tab_4.bmp（对应buttonImageId）。
博客园只能上传bmp图片，所以要将其他格式图片修改，然后在自己的博客园后台上传文件，这样前面的静态文件就可以使用刚刚上传了。
如果使用自己上传的静态文件，配置时就不要staticPrefix地址，提供imagePrefix和cssPrefix：
<script>
window.tctipConfig={
imagePrefix:"图片文件的相对路径",
cssPrefix:"样式文件的相对路径",
//staticPrefix:"http://static.tctip.com",
buttonImageId:4,
buttonTip:"dashang",
list:{
alipay:{qrimg:"支付宝二维码绝对路径"},
weixin:{qrimg:"微信二维码绝对路径"},
}};
</script>
<scriptsrc="js文件绝对路径"></script>
当然如果只是这样就完了，还是没有看作者的源JS代码，事实是不修改一下源码也无法使用的，其实主要是文件路径设置的问题。
打开JS源码，不是压缩的源码哦，除非你看的不眼花，也没人拦你的。
myConfig:{
imagePrefix:"",
cssPrefix:"",
/***
*当staticPrefix不为空的时候,imagePrefix和cssPrefix失效
*/
staticPrefix:"",
buttonImageId:"3",
buttonTip:"dashang",
cssUrl:"/myRewards.css"
},
原来的cssUrl是/css/myRewards.css，因为博客园上传的文件没有文件夹，所以去掉css。可能大家想到了，img也有一样的问题。
listConfig:{
'alipay':{icon:"alipay.bmp",name:"支付宝",desc:"支付宝打赏",className:""},
'tenpay':{icon:"img/tenpay.png",name:"财付通",desc:"财付通打赏",className:""},
'weixin':{icon:"weixin.bmp",name:"微信",desc:"微信打赏",className:""},
'bitcoin':{icon:"img/bitcoin.png",name:"比特币",desc:"比特币打赏",className:""},
'litecoin':{icon:"img/litecoin.png",name:"莱特币",desc:"莱特币打赏",className:""},
'dogecoin':{icon:"img/dogecoin.png",name:"狗狗币",desc:"狗狗币打赏",className:""}
},
支付方式列表中，修改图片相对路径，由于只使用了支付宝、微信两种方式，所以只修改他们的路径。其实还可以添加其他的支付方式在这里，就不赘述了。
buttonImageUrl:function(){
varid=tctip.myConfig.buttonImageId;
vartip=tctip.myConfig.buttonTip;
//returntctip.imageUrl(""+tip+"/tab_"+id+".bmp");
returntctip.imageUrl("/tab_4.bmp");
},
支付按钮的图片路径，同样修改返回的相对路径。
这样在博客园后台的设置页面，在页首Html处添加上面的配置文件就可以了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。