前幾天在一個博客中看到有一個打賞功能。其實簡單說來就是在頁面中加入動態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處添加上面的配置文件就可以了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
