用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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python中的取模运算方法
2018/11/10 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python实现元素等待代码实例
2019/11/11 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
外贸业务员工作职责
2014/01/06 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
详解Java实践之建造者模式
2021/06/18 Java/Android