zoukankan      html  css  js  c++  java
  • 用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处添加上面的配置文件就可以了。

  • 相关阅读:
    HDOJ 1846 Brave Game
    并查集模板
    HDU 2102 A计划
    POJ 1426 Find The Multiple
    POJ 3278 Catch That Cow
    POJ 1321 棋盘问题
    CF 999 C.Alphabetic Removals
    CF 999 B. Reversing Encryption
    string的基础用法
    51nod 1267 4个数和为0
  • 原文地址:https://www.cnblogs.com/good10000/p/6004420.html
Copyright © 2011-2022 走看看