用js实现博客打赏功能

 更新时间:2016年10月24日 09:06:16   作者:BelloWorld  
经常在一些博客中看到有一个打赏功能,本篇文章主要介绍了博客打赏功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

前几天在一个博客中看到有一个打赏功能。其实简单说来就是在页面中加入动态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>
<script src="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>
<script src="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(){
            var id = tctip.myConfig.buttonImageId;
            var tip = tctip.myConfig.buttonTip;
            //return tctip.imageUrl("" + tip + "/tab_" + id + ".bmp");
            return tctip.imageUrl("/tab_4.bmp");
        },

支付按钮的图片路径,同样修改返回的相对路径。

这样在博客园后台的设置页面,在页首Html处添加上面的配置文件就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript重定向URL参数的两种方法小结

    JavaScript重定向URL参数的两种方法小结

    关于JavaScript重定向URL参数的实现方法网站有很多,这篇文章的主要内容是从网上查找,并进行了修改,简单粗暴的实现使用JavaScript重置url参数,文中给出了详细的示例代码和调用代码,对大家的理解和学习很有帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • javascript实现二叉树的代码

    javascript实现二叉树的代码

    本篇文章主要介绍了javascript实现二叉树的代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • bootstrap table表格插件之服务器端分页实例代码

    bootstrap table表格插件之服务器端分页实例代码

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。这篇文章主要介绍了bootstrap table表格插件之服务器端分页实例代码,需要的朋友可以参考下
    2018-09-09
  • 浅谈js中StringBuffer类的实现方法及使用

    浅谈js中StringBuffer类的实现方法及使用

    下面小编就为大家带来一篇浅谈js中StringBuffer类的实现方法及使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 微信小程序实现animation动画

    微信小程序实现animation动画

    这篇文章主要为大家详细介绍了微信小程序实现animation动画的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • js 自动播放的实例代码

    js 自动播放的实例代码

    这篇文章主要介绍了js 自动播放的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • javascript格式化指定日期对象的方法

    javascript格式化指定日期对象的方法

    这篇文章主要介绍了javascript格式化指定日期对象的方法,涉及javascript针对日期对象操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 通过实例解析JavaScript for in及for of区别

    通过实例解析JavaScript for in及for of区别

    这篇文章主要介绍了通过实例解析JavaScript for in及for of区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • javascript实现划词标记划词搜索功能修正版

    javascript实现划词标记划词搜索功能修正版

    javascript实现划词标记划词搜索功能修正版...
    2006-12-12
  • 浅谈js中调用函数时加不加括号的问题

    浅谈js中调用函数时加不加括号的问题

    下面小编就为大家带来一篇浅谈js中调用函数时加不加括号的问题 。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论