用js实现博客打赏功能


Posted in Javascript onOctober 24, 2016

前几天在一个博客中看到有一个打赏功能。其实简单说来就是在页面中加入动态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 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
tab栏切换原理
Mar 22 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 #Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 #Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 #Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 #Javascript
js实现上传文件添加和删除文件选择框
Oct 24 #Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 #Javascript
第一次接触Bootstrap框架
Oct 24 #Javascript
You might like
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
征婚广告词
2014/03/17 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
英雄儿女观后感
2015/06/09 职场文书
高中班主任寄语
2019/06/21 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL