前几天在一个博客中看到有一个打赏功能。其实简单说来就是在页面中加入动态DOM节点,使用的也是简单的HTML、CSS、JS这些前端的一些简单知识。在GitHub上有开源的代码,这里稍加改造就可以用在自己的博客中了。
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"},}
};
当然如果只是这样就完了,还是没有看作者的源JS代码,事实是不修改一下源码也无法使用的,其实主要是文件路径设置的问题。
打开JS源码,不是压缩的源码哦,除非你看的不眼花,也没人拦你的。
原来的cssUrl是/css/myRewards.css,因为博客园上传的文件没有文件夹,所以去掉css。可能大家想到了,img也有一样的问题。
微信打赏",'bitcoin' : {icon: "img/bitcoin.png",name:"比特币",desc: "比特币打赏",'litecoin' : {icon: "img/litecoin.png",name:"莱特币",desc: "莱特币打赏",'dogecoin' : {icon: "img/dogecoin.png",name:"狗狗币",desc: "狗狗币打赏",className:""}
},
支付方式列表中,修改图片相对路径,由于只使用了支付宝、微信两种方式,所以只修改他们的路径。其实还可以添加其他的支付方式在这里,就不赘述了。