zoukankan      html  css  js  c++  java
  • 自制三合一多功能收款码

    文章来源:https://blog.egsec.cn/archives/76

    通过判断你是使用QQ,微信还是支付宝扫码支付的方式,制作一款不管你是用这三者中的哪一个扫描,都可以支付的收款码。

    直接上代码:

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6 <meta name="viewport" content="width=device-width, initial-scale=1">
      7 <title>EGSec - 收款码</title>
      8 <link rel="shortcuticon" href="https://blog.tcp123.cn/favicon.ico" />
      9 <script>
     10     var setting = {
     11         // 在以下双引号中粘贴QQ钱包收款链接
     12         qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQg4TkmAQYveDQ8AU%3D_xxx_sign&u=1125712387&n=EG",
     13         // 在以下双引号中粘贴微信收款链接
     14         wechatUrl: "wxp://f2f0_4HEas_V2v0JM0yrRer9WV6WgxkJ1gnt",
     15         // 在以下双引号中粘贴支付宝收款链接
     16         aliUrl: "https://qr.alipay.com/fkx08293focdyghubhn9a30",
     17         // 用于动态生成二维码API
     18         qrcodeApi: "https://www.kuaizhan.com/common/encode-png?large=true&data="
     19         /*
     20         备用二维码api:
     21         http://s.jiathis.com/qrcode.php?url=
     22 http://www.kuaizhan.com/common/encode-png?large=true&data=
     23 http://b.bshare.cn/barCode?site=weixin&url=
     24 http://pan.baidu.com/share/qrcode?w=150&h=150&url=
     25         */
     26     }
     27 </script>
     28 <style>
     29      * {
     30         margin: 0; padding: 0;
     31         font-family: Microsoft yahei;
     32     }
     33     body {
     34         background-color: #fff;
     35     }
     36     .code-item {
     37         width: 100%;
     38         max-width: 400px;
     39         margin: 0 auto;
     40         padding-bottom: 1px;
     41         display: none;
     42         background-color: #5c92ef;
     43     }
     44     .code-title {
     45         height: 100px;
     46         background-color: #f2f2f2;
     47         background-position: center;
     48         background-repeat: no-repeat;
     49         background-size: 50%;
     50     }
     51     .code-area {
     52         text-align: center;
     53     }
     54     .code-area>img {
     55         margin: 80px 0;
     56         width: 60%;
     57         min-width: 100px;
     58     }
     59     .code-footer {
     60         height: 80px;
     61         text-align: center;
     62         background-color: #fff;
     63         color: #666;
     64         line-height: 80px;
     65         font-size: 20px;
     66         margin: -2px 2px 2px 2px;
     67     }
     68     #code-all>.code-title {
     69         background-image: url("https://ae01.alicdn.com/kf/Hf128fa6dc81042308a0067e6ce1309d8z.png");
     70     }
     71     #code-qq {
     72         background-color: #54bc6e;
     73     }
     74     #code-qq>.code-title {
     75         background-image: url("https://ae01.alicdn.com/kf/Ha9e8ae195c2a477eab7e6df4bca6f254a.png");
     76     }
     77     #code-wechat {
     78         background-color: #54bc6e;
     79     }
     80     #code-wechat>.code-title {
     81         background-image: url("https://ae01.alicdn.com/kf/H4750a12d54bc476083c636860454187eo.png");
     82     }
     83 </style>
     84 </head>
     85 <body>
     86 <!-- 万能收款码展示区域 -->
     87 <div class="code-item" id="code-all">
     88 <div class="code-title"></div>
     89 <div class="code-area">
     90 <img id="page-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
     91 </div>
     92 <div class="code-footer">扫描以上二维码向EGSec付款</div>
     93 </div>
     94 <!-- QQ钱包二维码展示区域 -->
     95 <div class="code-item" id="code-qq">
     96 <div class="code-title"></div>
     97 <div class="code-area">
     98 <img id="qq-url" src="https://ww2.sinaimg.cn/large/a15b4afegy1fiw0xfoj1wj20gu0g50uc.jpg">
     99 </div>
    100 <div class="code-footer">长按以上二维码向EGSec付款</div>
    101 </div>
    102 <!-- 微信二维码展示区域 -->
    103 <div class="code-item" id="code-wechat">
    104 <div class="code-title"></div>
    105 <div class="code-area">
    106 <img id="wechat-url" src="https://ww2.sinaimg.cn/large/a15b4afegy1fiw11kh5u3j203o03r3yn.jpg">
    107 </div>
    108 <div class="code-footer">长按以上二维码向EGSec付款</div>
    109 </div>
    110 <script>
    111     if(navigator.userAgent.match(/Alipay/i)) {
    112         // 支付宝
    113 window.location.href = setting.aliUrl;
    114     } else if(navigator.userAgent.match(/MicroMessenger//i)) {
    115         // 微信
    116         document.getElementById("wechat-url").src = setting.qrcodeApi + urlEncode(setting.wechatUrl);
    117         document.getElementById("code-wechat").style.display = "block";
    118     } else if(navigator.userAgent.match(/QQ//i)) {
    119         // QQ
    120         document.getElementById("qq-url").src = setting.qrcodeApi + urlEncode(setting.qqUrl);
    121         document.getElementById("code-qq").style.display = "block";
    122     } else {
    123         // 其它,显示“万能码”
    124         document.getElementById("page-url").src = setting.qrcodeApi + urlEncode(window.location.href);
    125         document.getElementById("code-all").style.display = "block";
    126     }
    127     /*****************************************
    128      * url编码函数
    129      * 输入参数:待编码的字符串
    130      * 输出参数:编码好的
    131      ****************************************/
    132     function urlEncode(String) {
    133         return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");
    134     }
    135 </script>
    136 </body>
    137 </html>

    修改以下代码:

    将修改后的HTML文件上传至自己的服务器即可。

  • 相关阅读:
    redis系列之------过期策略
    总结与期盼
    服务不可用排查思路
    Spring Boot Starters到底怎么回事?
    redis系列之------主从复制
    redis系列之------对象
    redis系列之------数据库
    DirectX11 With Windows SDK--00 目录
    DirectX11 With Windows SDK--34 位移贴图
    DirectX11 With Windows SDK--33 曲面细分阶段(Tessellation)
  • 原文地址:https://www.cnblogs.com/egsec/p/12316226.html
Copyright © 2011-2022 走看看