用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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
vue移动端路由切换实例分析
May 14 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
DC动漫人物排行
2020/03/03 欧美动漫
php中的ini配置原理详解
2014/10/14 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PDO::errorInfo讲解
2019/01/28 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
django中forms组件的使用与注意
2019/07/08 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
三个python爬虫项目实例代码
2019/12/28 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
2014年乡镇纪委工作总结
2014/12/19 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang