用js實(shí)現(xiàn)博客打賞功能

更新時(shí)間：2016年10月24日 09:06:16 作者：BelloWorld

經(jīng)常在一些博客中看到有一個(gè)打賞功能，本篇文章主要介紹了博客打賞功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

前幾天在一個(gè)博客中看到有一個(gè)打賞功能。其實(shí)簡(jiǎn)單說來就是在頁(yè)面中加入動(dòng)態(tài)DOM節(jié)點(diǎn)，使用的也是簡(jiǎn)單的HTML、CSS、JS這些前端的一些簡(jiǎn)單知識(shí)。在GitHub上有開源的代碼，這里稍加改造就可以用在自己的博客中了。

最簡(jiǎn)單的使用方式是在頁(yè)面中加入如下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，是原作者自己提供的靜態(tài)文件相對(duì)路徑，用來存放img和css；list是打賞方式，qrimg是設(shè)置打賞方式的二維碼圖片。

接下來是在博客園中使用。先在本地準(zhǔn)備好靜態(tài)文件：

　　JS文件，tctip.min.js；

　　css樣式文件，myReward.css；

　　支付二維碼，ialipay.bmp、iweixin.bmp；

　　支付方式圖片，alipay.bmp、weixin.bmp；

　　贊助或者打賞按鈕圖片，tab_4.bmp（對(duì)應(yīng)buttonImageId）。

博客園只能上傳bmp圖片，所以要將其他格式圖片修改，然后在自己的博客園后臺(tái)上傳文件，這樣前面的靜態(tài)文件就可以使用剛剛上傳了。

如果使用自己上傳的靜態(tài)文件，配置時(shí)就不要staticPrefix地址，提供imagePrefix和cssPrefix：

<script>
  window.tctipConfig = {
    imagePrefix: "圖片文件的相對(duì)路徑",
    cssPrefix:   "樣式文件的相對(duì)路徑",
    //staticPrefix: "http://static.tctip.com",
    buttonImageId: 4,
    buttonTip:  "dashang",
    list:{
      alipay: { qrimg: "支付寶二維碼絕對(duì)路徑"},
      weixin: { qrimg: "微信二維碼絕對(duì)路徑"},
    }};
</script>
<script src="js文件絕對(duì)路徑"></script>

當(dāng)然如果只是這樣就完了，還是沒有看作者的源JS代碼，事實(shí)是不修改一下源碼也無法使用的，其實(shí)主要是文件路徑設(shè)置的問題。

打開JS源碼，不是壓縮的源碼哦，除非你看的不眼花，也沒人攔你的。

myConfig : {
    imagePrefix  : "",
    cssPrefix    : "",
    /***
     * 當(dāng)staticPrefix不為空的時(shí)候,imagePrefix和cssPrefix失效
     */
    staticPrefix  : "",
    buttonImageId  : "3",
    buttonTip    : "dashang",
    cssUrl:  "/myRewards.css"
  },

原來的cssUrl是/css/myRewards.css，因?yàn)椴┛蛨@上傳的文件沒有文件夾，所以去掉css?？赡艽蠹蚁氲搅耍琲mg也有一樣的問題。

listConfig:{
        'alipay'  :   {icon: "alipay.bmp", name:"支付寶", desc: "支付寶打賞", className: ""},
        'tenpay'  :   {icon: "img/tenpay.png", name:"財(cái)付通", desc: "財(cái)付通打賞", 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:""}
      },

支付方式列表中，修改圖片相對(duì)路徑，由于只使用了支付寶、微信兩種方式，所以只修改他們的路徑。其實(shí)還可以添加其他的支付方式在這里，就不贅述了。

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");
        },

支付按鈕的圖片路徑，同樣修改返回的相對(duì)路徑。

這樣在博客園后臺(tái)的設(shè)置頁(yè)面，在頁(yè)首Html處添加上面的配置文件就可以了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: