• 用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>
    <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处添加上面的配置文件就可以了。

  • 相关阅读:
    IO库 8.5
    IO库 8.4
    标准模板库——IO库
    IO库 8.3
    IO库 8.2
    IO库 8.1
    CF 599D Spongebob and Squares(数学)
    Django入门学习(一)
    hdu 5733
    uva 11210
  • 原文地址:https://www.cnblogs.com/good10000/p/6004420.html
Copyright © 2020-2023  润新知